需求
需要一个半遮挡的界面，遮挡住原来的界面，因为把用来被遮挡的界面写成了组件，所以将其设置为需要遮挡的界面的子对象
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"); } } // } // 新增代码 } }
