我想用QML实现以下场景。
以下是ListView
元素的示例/简化委托:
Component {
Item {
id: container
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: {
container.ListView.view.currentIndex = index
container.forceActiveFocus();
}
onEntered: {
actionList.state = "SHOW";
myItem.state = "HOVER"
}
onExited: {
actionList.state = "HIDE";
myItem.state = "NORMAL"
}
Rectangle {
id: myItem
color: "gray"
anchors.fill: parent
Row {
id: actionList
spacing: 5; anchors.fill: parent
Image {
id: helpAction
source: "" //Some image address
width: 16; height: 16; fillMode: Image.PreserveAspectFit
states: [
State {
name: "NORMAL"
PropertyChanges { target: helpAction; opacity: 0.7 }
},
State {
name: "HOVER"
PropertyChanges { target: helpAction; opacity: 1.0 }
}
]
MouseArea {
hoverEnabled: true
anchors.fill: parent
onEntered: {
parent.state = "HOVER";
}
onExited: {
parent.state = "NORMAL";
}
}
states: [
State {
name: "SHOW"
PropertyChanges { target: actionList; visible: false }
},
State {
name: "HIDE"
PropertyChanges { target: actionList; visible: true }
}
]
}
//Other action buttons...
states: [
// `NORMAL` and `HOVER` states definition here...
]
}
}
}
}
但我对MouseArea
有个问题。
对于entered
事件,内部MouseArea
(actionButton)不能正常工作。当鼠标进入动作按钮时,外部MouseArea
会触发exited
事件。
我的代码中有什么错误吗?更广泛地说,我如何在QML中实现这样的场景?
发布于 2014-01-29 00:07:33
我也遇到了同样的问题,并在QtQuick 5.0 documentation for MouseArea
中找到了答案。这个问题的答案其实很简单。
如果要在父MouseArea
中包括子鼠标悬停事件,请使子MouseArea
成为父MouseArea
的子事件
MouseArea {
id: parent
MouseArea {
id: child
}
}
由于我有一个将用作父视图的自定义Widget
类型,因此我最终将default
属性作为MouseArea
的子视图
Item {
default property alias children: mouseArea.data
MouseArea {
id: mouseArea
}
}
发布于 2013-08-09 19:54:09
Iv'e尝试了一些东西,但似乎不可能同时悬停在两个MouseArea
上。preventStealing
和propagateComposedEvents
似乎只在有单击事件时才起作用。但从内部MouseArea
,您可以触发另一个的entered()
信号。如下所示:
import QtQuick 2.1
Rectangle {
width: 500
height: 500
Rectangle {
width:300
height: 300
color: "red"
MouseArea {
id: big
anchors.fill: parent
hoverEnabled:true
onEntered: {
console.log("ENTERED BIG mousearea");
}
onExited: {
console.log("EXITED BIG mousearea");
}
}
Rectangle {
anchors.centerIn: parent
height: 100
width: 100
color: "green"
MouseArea {
anchors.fill: parent
hoverEnabled:true
onEntered: {
console.log("ENTERED small mousearea");
big.entered();
}
onExited: {
console.log("EXITED small mousearea");
big.exited();
}
}
}
}
}
问题是,来自包含MouseArea
的exited()
信号将在再次回调entered()
之前被调用。因此,您可能需要“延迟”exited()
中的状态更改,以确保您确实希望隐藏操作按钮。另一种解决方案是保存当前鼠标位置并仅在鼠标位于其边界之一时调用exited()
时隐藏按钮。
https://stackoverflow.com/questions/18135262
复制相似问题