高度动画不起作用

Posted 2023-02-16

【中文标题】高度动画不起作用

【英文标题】：Height animation does not work

【发布时间】：2016-03-01 16:44:20

【问题描述】：

我正在尝试创建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; 
                
            ]
           
    

【参考方案1】：

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

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

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

Behavior on height 
   NumberAnimation  duration: 400 

【讨论】：

非常感谢！我添加了"height"，它现在按预期工作。你为我节省了很多时间，谢谢。

@d''''''''''''''''''''''''''''，请你澄清一下，为什么你不接受这个答案在它为您节省了很多时间之后？