更改动画列的高度

Question

我创建了一个简单的树，我希望通过在视觉上设置树枝高度 expand/collapse 来制作动画。我下面的代码通过仅切换可见属性来工作，因此如果我单击分支它可以 appear/disappear.

但是我想将列的高度设置为从正常到 0 并返回的动画。问题是，当状态改变时，列的高度永远不会改变。为什么？

import QtQuick 2.0
import QtQuick.Layouts 1.12

Column {
    id: menuGroup
    property string path: "/"
    property bool _onCurrentPath: (treeMenu._currentPath.indexOf(path) === 0)

    anchors.left: parent.left
    anchors.right: parent.right
    spacing: 0
    // visible: _onCurrentPath  <-- this works

    states: [
        State {
            name: "HIDDEN"
            when: !_onCurrentPath
            PropertyChanges { target: menuGroup; height: 0}
        },
        State {
            name: "VISIBLE"
            when: _onCurrentPath
            PropertyChanges { target: menuGroup; height: 600 } //menuGroup.implicitHeight}
        }
    ]

    transitions: Transition {
        PropertyAnimation { property: "height"; duration: 500; easing.type: Easing.InOutQuad }
    }
    onStateChanged: {
        console.log("Group "+path+" state "+state)
    }
}

不能强制列高吗？（我是否必须将其包裹在矩形或其他解决方案中）？

Answer 1

当运行您的代码时，我注意到的第一件事是 onStateChanged 没有执行。您的 when: _onCurrentPath 似乎由于范围界定问题而不触发错误或警告而未进行评估。在这两种情况下，我都将其更改为 when: menuGroup._onCurrentPath，并且能够开始看到状态变化。

其次，我必须启用 clip: true 以确保该列的内容确实被修剪，否则它在视觉上并没有影响该列的折叠，因为内容仍然可见。

这是一个完整的工作示例（修改了您的 _onCurrentPath 布尔值以简化测试）：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 2.0

Window {
    width: 640
    height: 480
    visible: true

    Column {
        id: menuGroup
        property string path: "/"
        property bool _onCurrentPath: button.checked

        anchors.left: parent.left
        anchors.right: parent.right
        spacing: 0
        clip: true // Must enable to actually clip contents of column when collapsing

        states: [
            State {
                name: "HIDDEN"
                when: !menuGroup._onCurrentPath // Must explicitly state menuGroup here
                PropertyChanges { target: menuGroup; height: 0}
            },
            State {
                name: "VISIBLE"
                when: menuGroup._onCurrentPath
                PropertyChanges { target: menuGroup; height: 600 } 
            }
        ]

        transitions: Transition {
            PropertyAnimation { property: "height"; duration: 500; easing.type: Easing.InOutQuad }
        }

        onStateChanged: {
            console.log("Group "+path+" state "+state)
        }

        Rectangle { // Some column content for demonstration
            color: "red"
            implicitHeight: 600
            implicitWidth: 200
        }
    }

    Button {
        id: button
        anchors.bottom: parent.bottom
        checkable: true
        text: "Change States"
    }
}

更改动画列的高度

Change height of column for animation

animation

state

qml