状态与过渡

states 块在元素上声明一组具名状态。每个状态带有一个条件和一组属性变更。 {#sls.state.def}

export component Example inherits Window {
    in-out property <int> level;
    indicator := Rectangle {
        width: 32px;
        height: 32px;
        background: #808080;
    }

    states [
        alarm when level > 10: {
            indicator.background: #a02020;
            indicator.width: 64px;
        }
        warning when level > 5: {
            indicator.background: #c08000;
            indicator.width: 48px;
        }
    ]
}

slint

states 块是元素体内的一条语句，写作 states [ ... ]。 {#sls.state.form}

states 块可以出现在任何元素上，每个元素都有自己的一组状态。 {#sls.state.scope}

这包括根元素、子元素、子组件的根元素，以及 for 的元素。全局对象不得包含 states 块；这样做会构成编译错误。

元素可以持有多个 states 块，它们的所有条目共同构成其状态集合。 {#sls.state.blocks}

状态

每个条目由名字、持有布尔表达式的 when 子句、:，以及由花括号界定的属性变更主体组成。 {#sls.state.entry.form}

when 子句是可选的。没有它的状态永远不会被选中；它只是为过渡可以引用的状态命名。

name when condition: {
    element.property: value;
    // ...
}

slint

名字是元素局部的标识符，因此两个元素可以各自声明同名的状态。 {#sls.state.name}

条件可以引用作用域中的任何属性，包括其他元素的属性。 {#sls.state.condition}

同一时刻至多有一个状态处于活动状态。 {#sls.state.active}

当多个状态的条件都成立时，按源顺序最先列出的状态是活动状态。 {#sls.state.first-wins}

当没有条件成立时，没有状态处于活动状态，每个属性都保留自己的绑定。 {#sls.state.inactive}

属性变更

状态的主体是一个属性变更列表。每个变更由名字、:、一个值和 ; 组成。 {#sls.state.change.form}

非限定名字指向拥有 states 块的那个元素的属性，因此 background 与 root.background 相同。限定名字通过元素 id 定位后代，例如 indicator.background。 {#sls.state.change.target}

该名字应解析为一个属性。 {#sls.state.change.target-must-exist}

该值是那个属性的一个绑定。 {#sls.state.change.value}

当某个状态处于活动状态时，它列出的每个属性会取该状态的值，而不是自己的绑定。 {#sls.state.change.effect}

设置属性会替换属性变更赋予它的绑定。此后，无论哪个状态处于活动状态，该属性都保留被设置的值。 {#sls.state.change.set}

用双向绑定初始化的属性不能在状态中被更改；这样做是一个错误。

过渡

过渡将动画绑定到状态的进入或离开。过渡使用 in、out 或 in-out 块声明在它们所属的状态内部：

export component Example inherits Window {
    in-out property <bool> pressed;
    in-out property <bool> is-enabled;
    text := Text { text: "hello"; }

    states [
        disabled when !root.is-enabled: {
            background: gray;
            text.color: white;
            out {
                animate * { duration: 800ms; }
            }
        }
        down when pressed: {
            background: blue;
            in {
                animate background { duration: 300ms; }
            }
        }
    ]
}

slint

三种方向为：

in —— 进入状态时应用动画。
out —— 离开状态时应用动画。
in-out —— 两个方向都应用动画。in_out 可作为 in-out 的一种写法被接受。

方向块与状态体中的属性变更并列，并且可以重复；一个状态可以持有多个 in、out 或 in-out 块。

过渡中的动画

方向块的主体仅包含 animate 子句；其他任何内容都是一个错误。每个 animate 子句命名一个或多个属性，或通配符 *，并带有与其他地方的动画相同的字段（见动画）：

in {
    animate * { duration: 200ms; }
    animate background, text.color { duration: 100ms; }
}

slint

animate * 匹配状态更改的每个属性。通配符仅允许在过渡内部使用。
所命名的属性必须是该过渡所属状态所更改的属性之一；命名未更改的属性是一个错误。
已有自己 animate 绑定的属性也不能同时由过渡驱动；这种组合是一个错误。

旧语法中独立的 transitions [ ... ] 块不再受支持。请直接在状态内部用 in、out 和 in-out 声明过渡。