qtanimationqmlqtquickcontrols

Animate Button width on text change

I have a Button which text changes and when its text changes, its width also changes. I want to animate this change in width when I change the text. How can I do that ?

I tried following but its not working

import QtQuick.Window 2.15
import QtQuick 2.15
import QtQuick.Controls 2.15
 
Window {
    width: 500
    height: 600

    visible: true

    Button {
        property bool t: false
        text : t ? "very more text hahaha haha hehe" : "less text"
        onClicked: t = !t

        Behavior on width {
            NumberAnimation {
                duration: 1000
            }
        }
    }
}
Solution

  • The change of the Button width is a byproduct of its implicitWidth being changed here.

    By changing the Behavior to trigger on implicitWidth instead of width you will have your expected behavior.