finally getting the hover down with color changing
This commit is contained in:
@@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user