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:的＆＃34;高度＆＃34; ; duration: 400; }

您也可以通过Behavior实现这一目标（删除转换）：

Behavior on height { NumberAnimation { duration: 400 } }

高度动画不起作用

1 个答案: