- 显而易见,想要实现该效果需要捕获鼠标进入和离开行事件:
property bool isHover: false
MouseArea{
anchors.fill: parent
hoverEnabled: true
onEntered: isHover = true
onExited: isHover = false
onClicked: {
listview.currentIndex = index
console.log(listview.currentIndex)
}
}
- 使用qml怎么能少得了动画, 现在增加一点颜色动画
states: [
State { name: "true"; PropertyChanges { target: item; color : "red" } },
State { name: "false"; PropertyChanges { target: item; color : "white" }}
]
transitions: [
Transition { ColorAnimation { to: "red"; duration: 200 } },
Transition { ColorAnimation { to: "white"; duration: 200 } }
]
FxModel{
id: fxModel
}
ListView{
id: listview
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
model: fxModel
delegate: Rectangle{
property bool isHover: false
id:item
width: listview.width
height: 30
color: isHover == true ? "red" : "white"
state: isHover
clip: true
Text {
text: qsTr(name)
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onEntered: isHover = true
onExited: isHover = false
}
states: [
State { name: "true"; PropertyChanges { target: item; color : "red" } },
State { name: "false"; PropertyChanges { target: item; color : "white" }}
]
transitions: [
Transition { ColorAnimation { to: "red"; duration: 200 } },
Transition { ColorAnimation { to: "white"; duration: 200 } }
]
}
}