QML 解决button中添加了MouseArea,点击事件就不响应了的问题
ToolBar { RowLayout { anchors.fill: parent ToolButton { id: toolbutton text: qsTr("‹") onClicked: console.log("<") } Label { text: "Title" elide: Label.ElideRight horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter Layout.fillWidth: true } ToolButton { text: qsTr("⋮") onClicked: console.log(":") } MouseArea { //放布局外无效 anchors.fill: parent //充满整个布局,导致覆盖了按钮自身的点击事件,点击按钮无效 hoverEnabled: true onEntered: { console.log("enter") } onExited: { console.log("exit") } } } }
修改后:
ToolBar { RowLayout { anchors.fill: parent ToolButton { id: toolbutton text: qsTr("‹") onClicked: console.log("<") } Label { text: "Title" elide: Label.ElideRight horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter Layout.fillWidth: true } ToolButton { text: qsTr("⋮") onClicked: console.log(":") } MouseArea { //放布局外无效 anchors.fill: toolbutton //充满左边的工具按钮,成为了它的专属按钮事件 hoverEnabled: true onEntered: { console.log("enter") } onExited: { console.log("exit") } onClicked: {
console.log("<") //点击事件有效
} } } }
其他:
ToolBar { RowLayout { anchors.fill: parent ToolButton { id: toolbutton text: qsTr("‹") onClicked: console.log("<") } Label { text: "Title" elide: Label.ElideRight horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter Layout.fillWidth: true } ToolButton { id: toolbutton2 text: qsTr("⋮") onClicked: console.log(":") } MouseArea { //放布局外无效 anchors.fill: toolbutton //事件无效 hoverEnabled: true onEntered: { console.log("enter toolbutton") } onExited: { console.log("exit toolbutton") } onClicked: console.log("< toolbutton") } MouseArea { //放布局外无效 anchors.fill: toolbutton2 //事件无效 hoverEnabled: true onEntered: { console.log("enter toolbutton2") } onExited: { console.log("exit toolbutton2") } onClicked: console.log("< toolbutton2") } MouseArea { //放布局外无效 anchors.fill: parent //事件有效 hoverEnabled: true onEntered: { console.log("enter") } onExited: { console.log("exit") } onClicked: console.log("<") } } }
ToolBar { RowLayout { anchors.fill: parent ToolButton { id: toolbutton text: qsTr("‹") onClicked: console.log("<") } Label { text: "Title" elide: Label.ElideRight horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter Layout.fillWidth: true } ToolButton { id: toolbutton2 text: qsTr("⋮") onClicked: console.log(":") } MouseArea { //放布局外无效 anchors.fill: toolbutton //事件无效 hoverEnabled: true onEntered: { console.log("enter toolbutton") } onExited: { console.log("exit toolbutton") } onClicked: console.log("< toolbutton") } MouseArea { //放布局外无效 anchors.fill: parent //事件有效 hoverEnabled: true onEntered: { console.log("enter") } onExited: { console.log("exit") } onClicked: console.log("<") } MouseArea { //放布局外无效 anchors.fill: toolbutton2 //事件有效 hoverEnabled: true onEntered: { console.log("enter toolbutton2") } onExited: { console.log("exit toolbutton2") } onClicked: console.log("< toolbutton2") } } }