动画高度

Question

我希望通过修改元素来显示/隐藏元素null。以下是显示我的问题的示例代码：

height

我还没有添加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 } } } } } / Transition，但这个阶段的行为已经错了。默认情况下取消选中Animation，但会显示文字。另一方面，在检查开关后，文本隐藏并且永远不会显示回来。

我应该如何处理？我希望文字能够滑出＆＃34;滑出＆＃34;。我不想更改someswitch。

Answer 1

一般来说，应保证State的一致性，以确保Transition正常工作。一致性可以实现：

• 通过定义一致的默认状态
• 通过定义所有必要的State，就像提出的另一个好答案一样。

开头说，应该注意Layout的存在在这里扮演关键角色。 Layout有点取代 height Items设置及其minimumHeight属性。在这种情况下，State定义的height 确实影响了Label。显而易见的解决方案是强制State一致但超过Layout.preferredHeight，即为State定义默认"invisible"以及Layout.preferredHeight，而不是height 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 } } } 。您重新访问的代码版本可能如下所示：

TimedeltaIndex

可以找到一个完整的工作示例here（可以找到带有＃34;可见＆＃34;状态的版本here）。

Answer 2

您应该在案例中使用States和Transition。例如：

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