Height animation does not work inside table view



  • Hello. I'm trying to create table view with rows that can expand and show some content on click. It works, but does not show height property animation. I tried to add ColorAnimation and change expanded row color to black and it works well, but for some reason it does not work for height.
    Here is the code of my table view:

     TableView {
                id: myTableView
                anchors.right: parent.right
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 12
                anchors.leftMargin: 10
                anchors.top: parent.top
                anchors.topMargin: 12
                anchors.rightMargin: 10
    
                model: myModel
    
                ListModel {
                  //...
                }
    
                rowDelegate: Item {
                    id: myRowDelegate
    
                    Rectangle {
                        id: rect
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.right: parent.right
                        height: 22
                        color: styleData.alternate ? "#d9e5ea" : "white"
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                myRowDelegate.state = (myRowDelegate.state == "COLLAPSED") ? "EXPANDED" : "COLLAPSED";
                                console.log("click");
                            }
                        }
                    }
                    state: "COLLAPSED"
                    states: [
                        State {
                            name: "COLLAPSED"
                            PropertyChanges { target: myRowDelegate; height: 22; }
                        },
                        State {
                            name: "EXPANDED"
                            PropertyChanges { target: myRowDelegate; height: 400; }
                           // PropertyChanges { target: rect; color: "black"; }
                        }
                    ]
                    transitions: [
                        Transition {
                            from: "EXPANDED"
                            to: "COLLAPSED"
                            PropertyAnimation { property: height; duration: 400; }
                          //  ColorAnimation { duration: 400; }
                        },
                        Transition {
                            from: "COLLAPSED"
                            to: "EXPANDED"
                            PropertyAnimation { property: height; duration: 400; }
                            //ColorAnimation { duration: 400; }
                        }
                    ]
                }   
            }
        }
    


  • I got a solution on SO: I should've used "height" instead of height inside PropertyAnimation.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.