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


}
相关推荐
Tech Synapse几秒前
Python网络爬虫实践案例:爬取猫眼电影Top100
开发语言·爬虫·python
天若有情673几秒前
c++框架设计展示---提高开发效率!
java·c++·算法
biomooc12 分钟前
R语言/Rstudio 报错
开发语言·r语言
Theliars16 分钟前
C语言之字符串
c语言·开发语言
Root_Smile18 分钟前
【C++】类和对象
开发语言·c++
Reese_Cool19 分钟前
【数据结构与算法】排序
java·c语言·开发语言·数据结构·c++·算法·排序算法
一行玩python33 分钟前
SQLAlchemy,ORM的Python标杆!
开发语言·数据库·python·oracle
「QT(C++)开发工程师」37 分钟前
【qt版本概述】
开发语言·qt
NightCyberpunk41 分钟前
HTML、CSS
前端·css·html
xcLeigh1 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5