1

I want to animate adding and removing of TextField in ColumnLayout. Basically I want to animate like this:- https://doc.qt.io/qt-5/videos/viewtransitions-basic.mp4

4
  • That is a ListView, which has the corresponding transitions. Do you specifically want a ColumnLayout?
    – Amfasis
    Commented Feb 8, 2021 at 9:21
  • @Amfasis yes. I have Login page which uses ColumnLayout in which I want to animate the addition/removal of extra TextFields when state changes. Commented Feb 8, 2021 at 9:27
  • ColumnLayout has no transitions, so you cannot add animation. Use ListView instead, as @Amfasis already said. It looks the same and has transitions to animate what you want.
    – folibis
    Commented Feb 8, 2021 at 9:32
  • @folibis can you add an arbritary item to the ListView, which will also use the transitions?
    – Amfasis
    Commented Feb 8, 2021 at 9:38

2 Answers 2

3

As a ColumnLayout uses the implicitHeight to position the items, you can add an animation to that to create the sliding effect. I used a wrapping Item to preserve the implicitHeight of the TextField itself. It may not look perfect, but I don't think you cannot get that much further

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

I didn't found effective answer. Until then I'm using column as workaround

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.