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
        }
    }


}
相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
saltymilk9 小时前
C++ 模板参数推导问题小记(模板类的模板构造函数)
c++·模板元编程
感哥9 小时前
C++ lambda 匿名函数
c++
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化