From 10:00 CET Friday 22nd November we will adjust how the server works to deal with some recently reported problems. Therefore there may be a load problem, if you experience more problems than usual trying to access the forum then please PM AndyS or any of the moderators so they can inform me.


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.