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

Posted 2023-02-16

【中文标题】如何在 QML 中动画添加和删除元素到布局？

【英文标题】：How to animate adding and removing element to Layout in 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 中添加一个任意项，它也将使用转换吗？

【参考方案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
            
        
    ]