finally getting the hover down with color changing

This commit is contained in:
talksik
2024-02-09 10:46:57 -08:00
parent fbaf2da3d7
commit 9e11952bf0
+29 -15
View File
@@ -40,30 +40,44 @@ Window {
delegate: Item { delegate: Item {
id: listItem id: listItem
height: 20 height: 20
width: 100 width: 400
property bool hovered: false property bool hovered: false
required property string name required property string name
property bool isConnected: false
Rectangle { MouseArea {
anchors.fill: parent anchors.fill: parent
color: hovered ? "blue" : "transparent" hoverEnabled: true
onEntered: {
Text { console.log("on hover")
text: listItem.name listItem.hovered = true
color: listItem.hovered ? "white" : "black"
} }
onExited: listItem.hovered = false
onClicked: console.log("Clicked!")
MouseArea { Rectangle {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true color: listItem.hovered ? "blue" : "transparent"
onEntered: listItem.hovered = true
onExited: listItem.hovered = false
onClicked: console.log("Clicked!")
}
transitions: Transition { transitions: Transition {
ColorAnimation { target: parent; property: "color"; duration: 200 } ColorAnimation { target: parent; property: "color"; duration: 200 }
}
RowLayout {
anchors.fill: parent
Text {
Layout.fillWidth: true
text: listItem.name
color: listItem.hovered ? "white" : "black"
}
Button {
visible: !listItem.isConnected
text: "Connect"
onClicked: console.log("connecting to " + listItem.name)
}
}
} }
} }
} }