状态与过渡

当多个属性应当一起变化时——例如一个按钮在禁用、按下或悬停时外观不同—— 请声明状态，而不是在每个绑定中写条件判断。 states 语句为每个状态命名、给出条件， 并一次性设置多个元素的属性：

export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;
    default-font-size: 24px;

    label := Text { }
    ta := TouchArea {
        clicked => {
            active = !active;
        }
    }
    property <bool> active: true;
    states [
        active when active && !ta.has-hover: {
            label.text: "Active";
            root.background: blue;
        }
        active-hover when active && ta.has-hover: {
            label.text: "Active\nHover";
            root.background: green;
        }
        inactive when !active: {
            label.text: "Inactive";
            root.background: gray;
        }
    ]
}

slint

悬停会在蓝色和绿色背景之间切换，并调整标签； 点击则进入 inactive 状态。

过渡把动画绑定到状态变化上。 用 in 在进入状态时播放动画，用 out 在离开时播放，用 in-out 表示两者都播放：

states [
    disabled when !root.is-enabled : {
        background: gray;
        out {
            animate * { duration: 800ms; }
        }
    }
]

slint

关于完整语法，参见语言参考中的状态与过渡。