Implementing something like the Qt Creator examples page in QML

Bob64

I'm starting to think about implementing a gallery of "examples" using a GridView, a bit like the one that exists in Qt Creator.

At the delegate level, I'd like to implement something similar to what we see in Qt Creator, whereby some descriptive text replaces the example image if one hovers over an example. The form of the transition doesn't need to be the same but it would be nice to have some sort of animated transition.

I've been looking at StackView but I wonder if this would be overkill to use this in the delegate for a relatively simple "two page" use case. It seems geared up for more heavyweight applications at the application page level. Alternatives include: StackLayout - but that doesn't offer transitions as far as I can see; or some sort of ad hoc roll my own solution.

I'd appreciate any thoughts on the applicability or otherwise of StackView here.

SanjeevNair

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
    }
}

Bob64

Having had a play around in a test project, I am tending towards a simple ad hoc approach with two sibling items in the delegate, and logic based on the hover status to adjust visibility/opacity of the item that contains the description text.

SanjeevNair

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
    }
}

Bob64

@SanjeevNair Thanks for confirming my thinking on this. What you suggest with animating the opacity is very similar to what I had already tried and it does work quite nicely. Thanks for putting the code up here as other people might find it useful in future.

GrecKo

simplified code:

Image {
    id: exampleImage
    source: "example.jpg"
    anchors.fill: parent
    smooth: true
}

Text {
    text: "This is an example description."
    color: "white"
    anchors.fill: parent
    font.pixelSize: 16
    wrapMode: Text.Wrap
    horizontalAlignment: Text.AlignHCenter | Text.AlignVCenter

    HoverHandler { id: textHoverHandler }
    opacity: textHoverHandler.hovered ? 1 : 0
    Behavior on opacity {
        NumberAnimation {
            duration: 300
            easing.type: Easing.InOutQuad
        }
      }
}