Slint 基础类型

Slint 的所有组件的属性都有一个类型，Slint基础的类型如下:

• angle：由于表示角度的大小，使用如90deg, 1.2rad 0.25turn
• bool：布尔类型， 包含true 和 false两个值
• brush:笔刷类型
• color：颜色类型，可使用标准颜色名称或#GGRRBBAA 表示,也可指定颜色亮度来修改
• duration:用于表示动画的持续时间
• easing:用于表示动画的退出效果
• float:32 位的有符号浮点类型，也可使用百分号%表示
• image：图像的引用，可用来构造图像容器
• int: 有符号整型
• length: 长度类型，用于表示控件的几何大小或长度，如1px, 1pt, 1in, 1mm, 1cm等
• percent: 32 位浮点型数字，使用%接数字后缀
• physical-lenght：物理长度，如 1px, 1phx等
• relative-font-size: 指定字体大小
• string: 字符串，使用 UTF-8 编码

复杂类型

1. 线性渐变：@linear-gradient(angle, color percentage, color percentage, ...)

用于描述控件的渐变效果，允许指定不同的角度、线性插值等，能非常便捷的还原 UI 设计原稿。

2. 径向渐变:@radial-gradient(circle, color percentage, color percentage, ...)

用于描述放射方向的渐变效果

import { VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
    preferred-width: 500px;
    preferred-height: 400px;

    VerticalBox {
        Rectangle {
            background: @linear-gradient(90deg, #3f87a6 0%, #ebf8e1 50%, #f69d3c 100%);
        }
    
        Rectangle {
            background: @radial-gradient(circle, #f00 0%, #0f0 50%, #00f 100%);
        }
    }
}

3. Structs 结构体：用于自定义抽象属性，类似 C或 Rust 语法，内部属性由基本的类型或其他 struct 组成.也支持匿名结构体.

export struct Player  {
    name: string,
    score: int,
}

export component Example {
    in-out property<Player> player: { name: "Foo", score: 100 };
}

export component Example {
    in-out property<{name: string, score: int}> player: { name: "Foo", score: 100 };
    in-out property<{a: int, }> foo: { a: 3 };
}

4. 枚举：与 C或 Rust 一致

export enum CardSuit { clubs, diamonds, hearts, spade }

export component Example {
    in-out property<CardSuit> card: spade;
    out property<bool> is-clubs: card == CardSuit.clubs;
}

5. 数组和模组：数组中类型使用[]来包裹这个数组的元素，可用索引的方式读写各节点，模组使用[{}]包裹元素，允许内部元素类型不一样。

export component Example {
    # 数组
    in-out property<[int]> list-of-int: [1,2,3];
    # 模组
    in-out property<[{a: int, b: string}]> list-of-structs: [{ a: 1, b: "hello" }, {a: 2, b: "world"}];
}