Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
来源:互联网 发布:网络购物的流程,淘宝 编辑:程序博客网 时间:2024/05/29 16:13
需求
需要一个半遮挡的界面,遮挡住原来的界面,因为把用来被遮挡的界面写成了组件,所以将其设置为需要遮挡的界面的子对象
BUG
每次点击后面和前面的按钮都可以触发,如下:
Item { Rectangle { width: 200; height: 200; color: "yellow"; Button { anchors.top: parent.top; text: "bottom"; onClicked: { console.log("onClicked bottom"); } } // 本人把遮挡的部分当作组件写成单独的文件了,用的时候当作需要被遮挡的子对象 Rectangle { anchors.fill: parent; color: "#80000000" Button { text:"top"; anchors.bottom: parent.bottom; onClicked: { console.log("onClicked top"); } } } }}
解决方法一(笔者推荐方法)
改变MouseArea范围,如下:
Item { Rectangle { width: 200; height: 200; color: "yellow"; Button { anchors.top: parent.top; text: "bottom"; onClicked: { console.log("onClicked bottom"); } } // 本人把遮挡的部分当作组件写成单独的文件了,用的时候当作需要被遮挡的子对象 Rectangle { anchors.fill: parent; color: "#80000000" MouseArea { // 新增代码 anchors.fill: parent; // 新增代码 Button { text:"top"; anchors.bottom: parent.bottom; onClicked: { console.log("onClicked top"); } } } // 新增代码 } }}
解决方法二
使底层disable,这里特别要注意,如果父元素被disable那么子元素就会disable(单独设置enable也无效),所以不能使用父子关系
Item { Rectangle { id: bottomButton; width: 200; height: 200; color: "yellow"; Button { anchors.top: parent.top; text: "bottom"; onClicked: { console.log("onClicked bottom"); bottomButton.enabled = false; } } // 本人把遮挡的部分当作组件写成单独的文件了,用的时候当作需要被遮挡的子对象 } Rectangle { anchors.fill: bottomButton; color: "#80000000"// MouseArea { // 新增代码// anchors.fill: parent; // 新增代码 Button { text:"top"; anchors.bottom: parent.bottom; onClicked: { console.log("onClicked top"); } }// } // 新增代码 }}
阅读全文
0 0
- Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
- QML - 可视元素 Image
- QML - 可视元素 Text
- QML - 可视元素类型 - item
- QML - 可视元素 Rectangle (1)
- QML - 可视元素 Rectangle (2)
- QML基本可视元素-Item
- QML基本可视元素-Rectangle
- jq判断一个元素是否在可视范围内
- [前端]判定元素是否在可视范围的方法总结
- Jquery判断页面元素是否在浏览器的可视区域内
- 元素在浏览器可视区域判断
- js判断元素是否在可视区域内
- 判断元素是否在可视区域内
- div背景半透明 覆盖整个可视区域的遮罩层效果
- 弹出透明层,覆盖整个浏览器,页面元素的相对可视范围的不动
- 背景半透明覆盖整个可视区域
- selenium 实现鼠标移动到元素上,并操作元素(鼠标放上后才出现的元素)点击
- 关于yii2框架的傻瓜式安装
- vue的全局主键
- C++中四种线程同步的方法
- HDU 4430
- R_笔记
- Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
- string null + ""
- 【Scikit-Learn 中文文档】使用 scikit-learn 介绍机器学习 | ApacheCN
- Android 解码MediaCodec 播放H264 265
- RTP/RTSP/RTCP的区别
- struts2 convention plugin
- ViewPager+Fragment
- 青春路上,岁月如烟
- JSP基础语法(一)