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%);
        }
    }
}

image.png?x-oss-process=image/watermark,g_center,image_YXJ0aWNsZS9wdWJsaWMvd2F0ZXJtYXJrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxQXzQwCg==,t_20

3.Structs 結構體：用于自定義抽象屬性，類似 C或 Rust 語法，內部屬性由基本的類型或其他 struct 組成.也支持匿名結構體.

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

export component Example {
    in-out property 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 card: spade;
    out property 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"}];
}