Qt 动画高度

我想通过修改元素的

高度来显示/隐藏元素。下面是显示我的问题的示例代码：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4

Window {
    id: win
    width: 300
    height: 300
    visible: true

    ColumnLayout {
        width: parent ? parent.width : 200


        Switch {
            id: someswitch
            Layout.alignment: Qt.AlignCenter
        }

        Label {
            id: myText
            text: "dummy"
            height: 0

            wrapMode: Text.WordWrap
            clip: true
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignCenter

            states: State {
                name: "visible"
                when: someswitch.checked
                PropertyChanges { target: myText; height: implicitHeight }
            }

            Behavior on height {
                NumberAnimation { duration: 100 }
            }
        }
    }
}

我还没有添加
过渡
/
动画
，但在这个阶段，行为已经是错误的<默认情况下，code>someswitch

未选中，但显示文本。另一方面，在检查开关后，文本将隐藏，并且永远不会显示回来

---

我该怎么处理？我想把文字改为“滑出”。我不想更改它的

不透明度

在您的情况下，应该使用

状态

和

转换

。例如：

import QtQuick 2.4
import QtQuick.Window 2.0
import QtQuick.Controls 1.2

Window {
    id: mainWindow
    width: 600
    height: 600
    visible: true

    CheckBox {
        text: "hide/show"
        id: someswitch
        x: 10
        y: 10
    }

    Rectangle {
        id: mytext
        width: parent.width
        anchors.centerIn: parent
        color: "orange"
        state: "shown"
        states: [
            State {
                name: "shown"
                when: !someswitch.checked
                PropertyChanges { target: mytext; height: 300 }
            },
            State {
                name: "hidden"
                when: someswitch.checked
                PropertyChanges { target: mytext; height: 0 }
            }
        ]
        transitions: Transition {
             PropertyAnimation { property: "height"; duration: 500; easing.type: Easing.InOutQuad }
        }
    }
}

---

一般来说，

State

s的一致性应该得到保证，以确保

Transition

s正常工作。一致性可以通过以下两种方式实现：

• 通过定义一致的默认状态
• 通过定义所有必要的

  状态

  s，就像提出的另一个好答案一样

贝京说，应该注意的是，

布局的存在在这里起着关键作用。
布局
在某种程度上用其
最小高度
属性取代了
项目
的
高度
设置。在这种情况下，在
高度上定义的
状态
s实际上不会影响
标签
。显而易见的解决方案是强制
状态
的一致性，但超过
布局。preferredHeight
，即定义默认的
状态
，以及
布局的不同值的
“不可见”
。preferredHeight
而不是
高度
。代码的重新访问版本可能如下所示：

Label {
    id: myText
    text: "dummy"
    wrapMode: Text.WordWrap
    clip: true
    Layout.fillWidth: true
    Layout.alignment: Qt.AlignCenter
    Layout.preferredHeight: implicitHeight   //visible --> layout height = text implicit height

    states: State {
            name: "invisible"
            when: !someswitch.checked
            PropertyChanges { target: myText; Layout.preferredHeight: 0 }  // invisible --> layout item height forced to zero
        }

    Behavior on Layout.preferredHeight {
        NumberAnimation { duration: 100 }
    }
}

可以找到完全工作的示例（而可以找到具有“可见”状态的版本）。
即使默认情况下未选中
someswitch
，也会显示文本。在选中和取消选中它之后，它将按预期工作。我的代码：