Qt Quick如何实现按钮文本变化时的宽度过渡动画

Qt Quick开发中使用Button控件时需实现如下需求：按钮文本内容动态变化时，按钮宽度同步调整，且宽度变化过程添加平滑动画过渡效果。
原有实现代码无法达成预期效果，代码如下：

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

原有代码不生效的核心原因：
Qt Quick Controls 2的Button默认开启内容自适应逻辑，未显式给width属性赋值、也没有通过布局约束宽度时，控件内部的布局计算逻辑会直接强制将width设置为内容固有宽度（文本宽度+左右内边距），这个强制赋值过程会绕过给width配置的Behavior动画，直接跳变到目标宽度。

通过中间属性存储文本对应的目标宽度，在目标宽度变化时触发width的动画过渡，避免内部布局逻辑干扰动画执行，完整代码如下：

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

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

        // 存储当前文本对应的按钮目标宽度
        property real targetWidth: contentItem.implicitWidth + leftPadding + rightPadding
        // 初始化按钮宽度
        Component.onCompleted: width = targetWidth

        // 宽度变化动画配置
        Behavior on width {
            NumberAnimation {
                duration: 1000
                easing.type: Easing.InOutQuad // 可选配置缓动曲线，动画更自然
            }
        }

        // 目标宽度变化时，触发宽度赋值启动动画
        onTargetWidthChanged: width = targetWidth
    }
}

可选优化项 #

• 若不需要动画过程中文本溢出按钮，给Button添加clip: true属性，超出范围的内容会被自动裁剪
• 若按钮放在RowLayout/ColumnLayout等布局容器中，不要直接操作width属性，将逻辑中的width替换为Layout.preferredWidth，动画配置改为Behavior on Layout.preferredWidth即可适配布局规则
• 可自行调整动画时长、缓动曲线参数，匹配实际设计的动画效果

内容的提问来源于stack exchange，提问作者너를 속였다