如何在 QML 中动画添加和删除元素到布局？答案

【问题标题】：How to animate adding and removing element to Layout in QML?如何在 QML 中动画添加和删除元素到布局？
【发布时间】：2021-02-08 09:18:06
【问题描述】：

我想在 ColumnLayout 中添加和删除 TextField 的动画。基本上我想像这样制作动画：- https://doc.qt.io/qt-5/videos/viewtransitions-basic.mp4

【问题讨论】：

那是一个ListView，里面有对应的transitions。你特别想要一个 ColumnLayout 吗？
@Amfasis 是的。我有使用 ColumnLayout 的登录页面，我想在状态更改时动画添加/删除额外的 TextFields。
ColumnLayout 没有过渡，因此您无法添加动画。正如@Amfasis 已经说过的那样，改用ListView。它看起来是一样的，并且有过渡来制作你想要的动画。
@folibis 你能在 ListView 中添加一个任意项，它也将使用转换吗？

标签： qt animation qml

【解决方案1】：

由于 ColumnLayout 使用 implicitHeight 来定位项目，您可以在其中添加动画以创建滑动效果。我使用包装Item 来保留TextField 本身的implicitHeight。它可能看起来并不完美，但我认为你不能走得更远

Item {

    visible: your_property_here

    implicitHeight: visible ? text.implicitHeight : 0
    Behavior on implicitHeight { NumberAnimation { duration: 500 } }

    TextField {
        id: text
        anchors.fill: parent

        scale: parent.visible ? 1 : 0.2
        Behavior on scale { NumberAnimation { duration: 500 } }
    }
}

【讨论】：

【解决方案2】：

我没有找到有效的答案。在那之前，我使用列作为解决方法

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

Page {

    id: page_root

    component ETextField : TextField {
        width: root.width/2
    }


    state: "LOGIN"

    Column {

        anchors.centerIn: parent

        ETextField {
            id:host
            placeholderText: "Host e.g:- exam.server.com:8080"
        }

        ETextField {
            id:uane
            placeholderText: "Username"
        }

        ETextField {
            id: passwd
            placeholderText: "Password"
        }

        ETextField {
            id: confirm_passwd
            placeholderText: "Confirm Password"
        }

        RowLayout {
            Button {
                id: submit
                text: "Login"
            }
            Button {
                id: change_state
                text: "Register Instead"
                onClicked:  page_root.state = page_root.state === "LOGIN" ? "REGISTER" : "LOGIN"
            }
        }
    }

    states: [
        State {
            name: "LOGIN"
            PropertyChanges {
                target: confirm_passwd
                height: passwd.height

            }
            PropertyChanges {
                target: change_state
                text : "Register Instead"
            }
        },
        State {
            name: "REGISTER"
            PropertyChanges {
                target: confirm_passwd
                height: 0
            }
            PropertyChanges {
                target: change_state
                text : "Login Instead"
            }
        }
    ]

    transitions: [
        Transition {
            from: "LOGIN"
            to: "REGISTER"
            NumberAnimation {
                target: confirm_passwd
                property : "height"
                duration: 100
            }
        },
        Transition {
            from: "REGISTER"
            to: "LOGIN"
            NumberAnimation {
                target: confirm_passwd
                property : "height"
                duration: 100
            }
        }
    ]
}

【讨论】：