Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Color animation



  • I have setup a mouseArea for this Item delegate and I want the Rectangle (keyboardCardImageContainer) sibling of the delegate to make a color transition whenever the mouseArea's onClicked signal fires. How might I do that?

            delegate: Item
            {
    
              //Notify itemSelected that the user has made a decision
              MouseArea
              {
                height: keyboardCardIDContainer.height + keyboardCardImageContainer.height
                width: keyboardCardIDContainer.width
                onClicked: 
                                {
                                  //Here is where I want the animation to take place
                                  //I imagine it would be something like:
                                  //keyboardCardImageContainer.animation = true
                                  //or something along those lines?
                                  gridViewContainer.itemSelected(index)
                                }
              }
              Rectangle
              {
                id: keyboardCardIDContainer
                width: 250
                anchors.horizontalCenter: keyboardCardImageContainer.horizontalCenter
                height: keyboardCardID.height
                color: "#d7d7d7"
                TextStyled
                {
                  id: keyboardCardID
                  font.bold: true
                  font.pixelSize: 18
                  anchors.centerIn: parent
                  elide: Text.ElideMiddle
                  text: gridView.imageList[index]
                }
              }
              Rectangle
              {
                id: keyboardCardImageContainer
                height: 250
                width: 250
                radius: 5
                anchors.top: keyboardCardIDContainer.bottom
                color: "lightsteelblue"
                Image
                {
                  id: keyboardCardImage
                  anchors.centerIn: parent
                  source: modelData
                }
              }
            }
    




  •     MouseArea {
            height: keyboardCardIDContainer.height + keyboardCardImageContainer.height
            width: keyboardCardIDContainer.width
            onClicked: {
    
                keyboardCardIDContainer.color = Qt.hsla(Math.random(), 0.5, 0.5, 1.0);
    
                gridViewContainer.itemSelected(index)
            }
        }
    

Log in to reply