Important: Please read the Qt Code of Conduct -

GridView Text animation

  • Currently the text element for my grid view is changing color's when highlighted:

    color: gridView.currentIndex === index ? themeManager.currentTheme.palette.highlightColor : "black"

    I would like to have this transition be animated in some: way, shape or form but I am not sure how to go about that. Is there some way I can animate a text color transition? Even if it wasn't the color but perhaps there is some way that whenever the currentIndex changes to a new selected item the text grows Bold for a moment or something along those lines?

    I tried using the Component with highlight but I was struggling to get something working that isn't a separate from what's currently inside the GridView if that makes sense. For instance, saying something like:

    Component {
        id: highlight
        Rectangle {
            width: view.cellWidth; height: view.cellHeight
            color: "lightsteelblue"; radius: 5
            x: view.currentItem.x
            y: view.currentItem.y
            Behavior on x { SpringAnimation { spring: 3; damping: 0.2 } }
            Behavior on y { SpringAnimation { spring: 3; damping: 0.2 } }

    works great but it add's a new element, in this case a Rectangle. I don't' want to add something new for a highlight animation, I want to alter what's already in the GridView. So in the above code the Rectangle kind of moves a bit whenever the selection changes. I want something like that to happen to my text.

  • I could have sworn there is a QML module that includes standard delegates and hopefully hightlights for different QML types. However I cannot find it. I swore I have used it as well.

    I know there were a few times I wanted to take the defaults for these and tweak them. If I find it I will let you know.

  • To be honest my goal isn't to use the highlight feature of GridView necessarily. All I want to be able to do is slow down the rate at which my text color changes whenever I select an item or perhaps show some other animation which will (on top of the color change itself) indicate to the user that the selection has been changed.

    As of right now the text is green when gridView.currentIndex === index and black otherwise. So when I click on a different cell that new cell's text color transitions to green. That transition is the transition I wish to target but I can't seem to get it to work using ColorAnimation or PropertyAnimation... probably cause I have never used either and I am fumbling.

Log in to reply