高度动画不起作用

Question

我正在尝试创建TableView，其行可以展开并在点击时显示一些内容。它有效，但不显示高度属性动画。我尝试添加ColorAnimation 并将扩展行颜色更改为黑色，效果很好，但由于某种原因它不适用于高度。 这是我的表格视图的代码：

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
                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; }
                }
            ]
        }   
    }
}

Answer 1

您必须使用属性名称作为字符串才能使其工作：

PropertyAnimation { property:“身高”; duration: 400; }

您也可以通过Behavior 实现这一点（为此删除过渡）：

Behavior on height {
   NumberAnimation { duration: 400 }
}