QML如何创建掩码窗口

QML在界面设计时,满屏的触发按键,在弹出新窗口时需要对屏幕中非当前窗口的位置做一个灰度处理,不仅能够体现界面的层次感,而且能够防止误触到其他按键,导致异常处理,按规矩,先上图(左边原图,右边是弹出窗口后的图片):
在这里插入图片描述在这里插入图片描述

1、原理

该方法的原理很简单,创建一个跟原窗口一样大小的Rectangle,记为backgroundWin,设置颜色为灰色,透明度为部分透明,然后在backgroundWin的中间再创建一个新的Rectangle为fontWin,这样在视觉效果上可以实现该功能,敲黑板,下面是重点注意的地方:
1、背景框的颜色设置一定要设置为透明,否则没有效果。

color: Qt.rgba(0.2,0.2,0.2,0.8)

2、背景区域的属性z设置为100,否则可能会出现窗口并非在最上面,如下图:

z: 100

在这里插入图片描述
3、背景框必须设置MouseArea,否则下面的按键还会被触发。

MouseArea {
	anchors.fill: parent
}

2、代码

MaskWin.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Rectangle {
    id:maskWin
    color: Qt.rgba(0.2,0.2,0.2,0.8)
    width: 1920
    height: 1080
    z: 100
    MouseArea {
        anchors.fill: parent
    }

    Rectangle {
        id:showWin
        visible: true
        width: parent.width/2
        height: parent.height/2
        x: (parent.width - width)/2
        y: (parent.height - height)/2
        color: "white"
        radius: 10
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值