Solved 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
withhighlight
but I was struggling to get something working that isn't a separate from what's currently inside theGridView
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 theGridView
. So in the above code theRectangle
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.
https://doc.qt.io/qt-5/qmltypes.html
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 ofGridView
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 usingColorAnimation
orPropertyAnimation
... probably cause I have never used either and I am fumbling.