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