Hey Bob64,
It sounds like you're on the right track with your idea to go for a simpler, ad hoc approach. Using two sibling items and toggling their visibility/opacity based on hover seems like a good, lightweight solution—especially if you're aiming for something less heavyweight than StackView.
If you want to add a little extra polish, you could also experiment with Transitions and Behavior in QML to animate the opacity changes, giving it that smooth, Qt Creator-style feel. That way, you could achieve something closer to the hover-based description transition you want, without over-complicating the delegate structure.
I think StackView might be overkill here, as you mentioned, especially since it’s designed for more complex page-level transitions. StackLayout doesn’t seem to give you what you need in terms of transition effects, so your ad hoc solution seems more practical for a simple case.
Let me know if you need any more details or help setting up the hover logic. Best of luck!
Image {
id: exampleImage
source: "example.jpg"
anchors.fill: parent
smooth: true
}
Text {
id: descriptionText
text: "This is an example description."
color: "white"
anchors.centerIn: parent
opacity: 0
font.pixelSize: 16
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
}
MouseArea {
id: hoverArea
anchors.fill: parent
onClicked: {
console.log("Item clicked!")
}
onHoveredChanged: {
descriptionText.opacity = hoverArea.containsMouse ? 1 : 0
}
}
Behavior on descriptionText.opacity {
NumberAnimation {
duration: 300
easing.type: Easing.InOutQuad
}
}
