代码之家 › 专栏 › 技术社区 › TSG

更改动画列的高度

state qml animation

TSG · 技术社区 · 3 年前

我创建了一棵简单的树,我希望通过视觉上扩展/折叠树枝的高度来制作动画。我下面的代码通过只切换可见属性来工作,这样如果我点击分支,它就可以出现/消失。

但是,我想将柱的高度从法线设置为0,然后再设置为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)
    }
}

不能强制调整柱子的高度吗?(我必须把它包装成矩形还是其他解决方案)?

0 回复 | 直到 3 年前

fallerd 3 年前

运行代码时我注意到的第一件事是 onStateChanged 没有执行。看来你的 when: _onCurrentPath 由于范围问题而未进行评估,该问题不会触发错误或警告。我把这个改成了 when: menuGroup._onCurrentPath 在这两种情况下,我都能开始看到状态的变化。

其次,我必须启用 clip: true 为了确保列的内容确实被修剪过,否则列折叠在视觉上没有区别,因为内容仍然可见。

这是一个完整的工作示例(修改了您的 _onCurrentPath bool简化测试):

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"
    }
}