QML如何让Behavior同时作用于多个属性？

QML的Behavior语法不支持直接在on后列出多个属性，每个Behavior只能绑定单个属性，所以你原代码的写法会报错。要简化代码、避免重复定义多个Behavior，可以用以下方法：

方法：封装通用动画组件 #

通过Component把重复的动画逻辑封装起来，然后给每个需要过渡的属性单独绑定Behavior并引用这个组件，这样既复用了代码，又实现了所有属性的平滑过渡：

ApplicationWindow {
    width: 1280
    height: 720
    visible: true
    title: qsTr("Hello World")
    color:"#202020"

    Rectangle{
        id:rect
        x:100
        y:100
        width: 100
        height: 50
        color:"red"

        // 封装通用的平滑动画组件
        Component {
            id: smoothAnimation
            PropertyAnimation{duration:1000}
        }

        // 给每个目标属性绑定Behavior，复用同一个动画组件
        Behavior on x { component: smoothAnimation }
        Behavior on y { component: smoothAnimation }
        Behavior on width { component: smoothAnimation }
        Behavior on height { component: smoothAnimation }
        Behavior on color { component: smoothAnimation }
    }

    Button{
        onClicked: {
            rect.x=300
            rect.y=400
            rect.width=200
            rect.height=100 // 修正原代码的笔误（少了等号）
            rect.color="green"
        }
    }
}

补充说明 #

• 原代码中rect.height100是笔误，需要改成rect.height=100才能正常触发高度变化的动画。
• 如果后续需要调整动画参数（比如修改duration、easing曲线），只需要修改smoothAnimation组件里的代码，所有属性的动画都会同步更新，维护起来更方便。

内容的提问来源于stack exchange，提问作者橡树xd