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


}
相关推荐
程序员Aries20 小时前
自定义网络协议与序列化/反序列化
linux·网络·c++·网络协议·程序人生
C+ 安口木20 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
山海鲸可视化20 小时前
简单聊聊数据可视化大屏制作的前端设计与后端开发
前端·信息可视化·数字孪生·数据可视化·3d模型·三维渲染
CoderYanger20 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html
赛博切图仔20 小时前
qiankun、micro-app、wujie,2025年我们该选谁?
前端·javascript
LuckySusu20 小时前
【vue篇】Vue 自定义指令完全指南:从入门到高级实战
前端·vue.js
Pafey20 小时前
MFC中一个类的成员变量值自动被篡改:多重继承带来的问题
c++·mfc
LuckySusu20 小时前
【vue篇】Vue 响应式核心:依赖收集机制深度解密
前端·vue.js
LuckySusu20 小时前
【vue篇】Vue.js 2025:为何全球开发者都在拥抱这个前端框架?
前端·vue.js
LuckySusu20 小时前
【vue篇】Vue 单向数据流铁律:子组件为何不能直接修改父组件数据?
前端·vue.js