响应式

响应式是 Slint 的核心概念。它允许用极少的代码创建复杂的动态用户界面。以下示例将帮助你理解响应式的基础知识。

export component MyComponent {
    width: 400px; height: 400px;

    Rectangle {
        background: #151515;
    }

    ta := TouchArea {}

    myRect := Rectangle {
        x: ta.mouse-x;
        y: ta.mouse-y;
        width: 60px;
        height: 60px;
        background: ta.pressed ? orange : skyblue;
        Text {
            x: 5px; y: 5px;
            text: "x: " + myRect.x / 1px;
            color: white;
        }
        Text {
            x: 5px; y: 20px;
            text: "y: " + myRect.y / 1px;
            color: white;
        }
    }
}

slint

顾名思义，响应式指的是用户界面的各个部分会随着变更自动更新或「响应」变更。上面的例子看起来简单，但运行时它做了好几件事：

当你移动鼠标时，Rectangle 会跟随鼠标移动。
如果在任意位置 click，Rectangle 会改变颜色。
Text 元素会更新其文本，以显示 Rectangle 的当前位置。

这里的「魔法」直接内置于 Slint 语言之中。无需显式选择启用，也无需定义特定的有状态项。 Rectangle 会自动更新，因为它的 x 和 y 属性绑定到了 TouchArea 元素的 mouse-x 和 mouse-y 属性。具体做法是给 TouchArea 取一个名字 ta 来标识它，然后在 Slint 所称的 expression（表达式）中使用该名字来跟踪值。就这么简单：x: ta.mouse-x; 和 y: ta.mouse-y;。mouse-x 和 mouse-y 属性内置于 TouchArea，当光标在其上方移动时会自动更新。

TouchArea 还有一个 pressed 属性，仅当光标被按下或点击按下时才为 true。因此三元表达式 background: ta.pressed ? orange : white; 会在 ta.pressed 为 true 时把 Rectangle 的背景色改为橙色，否则改为白色。

类似地，这两个文本项通过跟踪矩形的 x 和 y 位置来更新。

被覆盖的绑定

绑定只会在属性保留它期间保持有效：在代码中赋值（foo.bar = 42;）会破坏绑定，属性随之停止响应。求值与纯度章节描述了确切的规则。

性能

从性能角度看，Slint 会找出哪些属性发生了变更，然后找出所有依赖该值的表达式。随后根据新值重新求值这些依赖项，界面便会更新。

重新求值发生在查询该属性时，是惰性的。

在内部，求值绑定时访问的任何属性都会注册一个依赖项。当某个属性变更时，依赖项会收到通知，所有依赖的绑定都会被标记为脏。

属性表达式

表达式的复杂度各不相同：

// Tracks the `x` value of an element called foo
x: foo.x;

// Tracks the value, but sets it to 0px or 400px based on if
// foo.x is greater than 400px
x: foo.x > 100px ? 0px : 400px;

// Tracks the value, but clamps it between 0px and 400px
x: clamp(foo.x, 0px, 400px);

slint

如最后一个示例所示，函数可以作为属性表达式的一部分使用。当表达式过于复杂，难以作为单行阅读或维护时，这很有用。

export component MyComponent {
    width: 400px; height: 400px;

    pure function lengthToInt(n: length) -> int {
        return (n / 1px);
    }

    Rectangle {
        background: #151515;
    }

    ta := TouchArea {}

    myRect := Rectangle {
        x: ta.mouse-x;
        y: ta.mouse-y;
        width: 60px;
        height: 60px;
        background: ta.pressed ? orange : skyblue;
        Text {
            x: 5px; y: 5px;
            text: "x: " + lengthToInt(myRect.x);
            color: white;
        }
        Text {
            x: 5px; y: 20px;
            text: "y: " + lengthToInt(myRect.y);
            color: white;
        }
    }
}

slint

这里，前面的示例被更新为使用函数将长度转换为整数。这还会截断 x 和 y 值，使其更易读，例如用 ‘4’ 代替 ‘4.124488’。

纯度

绑定必须没有副作用，编译器会在纯上下文中强制这一点。用 pure 关键字标记回调和公共函数，以便从绑定中调用它们；参见求值与纯度。

双向绑定

<=> 语法将两个属性链接起来，使它们始终包含相同的值；参见语言参考中的双向绑定。