Qt_Note20_QML_自定义Grid控件与OpacityMask的使用

cpp 复制代码
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.14

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    // 自定义Grid控件与OpacityMask的使用
    Grid {
        id: grid
        width: 15
        height: 200
        columns: 3
        x: 300
        y: 100
        visible: false  //看不到了
        Repeater {
//            model: grid.width / 5 * grid.height / 5
            model: grid.width / 5 * 200 / 5
            Rectangle {
                width: 5
                height: 5
                color: index % 2 ? "black" : "white"
                Component.onCompleted: {
                    console.log("rect" + index)
                }
            }
        }
    }

    Rectangle {
        id: maskRect
        x: 200
        y: 100
        width: grid.width
        height: grid.height
        visible: true
        radius: 10
        border.color: "red"
    }

    Button {
        width: 50
        height: 50
        x: 100
        y: 100
        onClicked: {
            grid.height -= 10
        }
    }

    Rectangle{
        width: grid.width + 4
        height: grid.height + 4
//        anchors.centerIn: parent
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        border.color: "red"
        radius: 10
        border.width: 3
        OpacityMask {
            source: grid
            maskSource: maskRect
            anchors.fill: parent
            anchors.margins: 2
        }
    }


}
相关推荐
jiaway几秒前
【C语言】第一课 环境配置
c语言·开发语言
quan26319 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路10 分钟前
GDAL 读取影像元数据
前端
Qiang_san21 分钟前
GNU Make | C/C++项目自动构建入门
c语言·c++·gnu
小红帽2.042 分钟前
从零构建一款开源在线客服系统:我的Go语言实战之旅
开发语言·golang·开源
slim~43 分钟前
Java基础第9天总结(可变参数、Collections、斗地主)
java·开发语言
源代码•宸1 小时前
Leetcode—2749. 得到整数零需要执行的最少操作数【中等】(__builtin_popcountl)
c++·经验分享·算法·leetcode·位运算
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器