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


}
相关推荐
落羽的落羽2 分钟前
【Linux系统】从零掌握make与Makefile:高效自动化构建项目的工具
linux·服务器·开发语言·c++·人工智能·机器学习·1024程序员节
葱头的故事14 分钟前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节
-森屿安年-15 分钟前
STL 容器:List
开发语言·c++·list·1024程序员节
uxiang_blog25 分钟前
C++进阶:继承
开发语言·c++
赵杰伦cpp32 分钟前
数据结构——二叉搜索树深度解析
开发语言·数据结构·c++·算法
Mintopia41 分钟前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈
Mintopia1 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia1 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
木易 士心1 小时前
CSS 样式用法大全
前端·css·1024程序员节
012925201 小时前
1.1 笔记 html 基础 初认识
前端·笔记·html