Slint 1.0 已發(fā)布，標(biāo)志著項(xiàng)目已順利從開(kāi)發(fā)階段“畢業(yè)”，可正式用于生產(chǎn)環(huán)境。

Slint 可用于為各種操作系統(tǒng)和處理器架構(gòu)開(kāi)發(fā) UI，包括 Linux、macOS、Windows、WebAssembly、Blackberry QNX 和裸機(jī)。它允許 JavaScript 開(kāi)發(fā)人員為嵌入式和桌面應(yīng)用程序創(chuàng)建原生用戶界面。

Slint UI 介紹

Slint 曾經(jīng)被稱(chēng)為 SixtyFPS，特點(diǎn)是既快又小，是一個(gè) Rust 編寫(xiě)的綜合性 UI 工具包，用于為桌面和嵌入式設(shè)備構(gòu)建原生用戶界面。其開(kāi)發(fā)團(tuán)隊(duì)希望將 Slint 打造成下一代 GUI 工具包，因此從頭開(kāi)始構(gòu)建項(xiàng)目時(shí)就考慮了可擴(kuò)展性、包容性、工具性和跨平臺(tái)兼容性。

• 流暢：平滑，觸摸友好的用戶接口

• 跨平臺(tái)：目標(biāo)平臺(tái)包括嵌入式設(shè)備和桌面應(yīng)用軟件(手機(jī)和網(wǎng)頁(yè))

• 多語(yǔ)言：可以使用自己擅長(zhǎng)的語(yǔ)言API(C++,Rust,JavaScript)

• 快速設(shè)計(jì)：適時(shí)預(yù)覽快速迭代

多語(yǔ)言支持的描述，參考官方原文：

We choose to first support this set of languages because it is the implementation language, another low level language, and a dynamic language. We believe that it will be easy to extend the integration into more programming languages later.

Slint 的定位是一個(gè)支持多語(yǔ)言、適配任意顯示屏、且高效流暢的用戶圖形接口工具包。設(shè)計(jì)目標(biāo)包括：

• 可擴(kuò)展：在連接到設(shè)備的任何屏幕上運(yùn)行，從臺(tái)式計(jì)算機(jī)到低功耗嵌入式設(shè)備。

• 輕量級(jí)：能夠在幾百KB內(nèi)存的場(chǎng)景中運(yùn)行，并且需要很少的處理能力。

• 原生支持：Slint 支持多種目標(biāo)平臺(tái)，從嵌入式設(shè)備到桌面應(yīng)用，包括移動(dòng)設(shè)備和 Web。

開(kāi)發(fā)團(tuán)隊(duì)表示，使用 Slint 構(gòu)建的圖形應(yīng)用程序可以在內(nèi)存小于 300 kB 的系統(tǒng)上運(yùn)行，例如包含 264kB RAM 和 ARM Cortex-M0+ 處理器的 Raspberry Pi Pico。因此，Slint 非常適合為嵌入式設(shè)備應(yīng)用程序開(kāi)發(fā) UI。

Slint 使用了聲明式編程來(lái)簡(jiǎn)化 UI 的開(kāi)發(fā)，優(yōu)化應(yīng)用程序開(kāi)發(fā)和性能的方法是：

• 用聲明式語(yǔ)言來(lái)描述 UI，使用的語(yǔ)法提供了一種廣泛的方式來(lái)描述各種圖形元素，同時(shí)易于閱讀、編寫(xiě)和學(xué)習(xí)

• Slint 編譯器對(duì)描述 UI 的代碼進(jìn)行優(yōu)化并翻譯成原生代碼

• 采用任何語(yǔ)言編寫(xiě)的業(yè)務(wù)邏輯，可通過(guò)使用 Slint 提供的特定于語(yǔ)言的 API 與 UI 連接

整體架構(gòu)

控件支持

示例：

• 不同平臺(tái)的原生桌面小部件（Windows、macOS、Linux）

• WebAssembly

Slint 完全采用 Rust 實(shí)現(xiàn)，同時(shí)支持不同的編程語(yǔ)言，目前為 C++、JavaScript 和 Rust 提供了 API。

詳情查看發(fā)布公告：https://slint-ui.com/blog/announcing-slint-1.0.html

MCU支持

slint-ui 是嵌入式開(kāi)發(fā)的福音，基于 Rust ，使用了聲明式編程來(lái)簡(jiǎn)化 UI 的開(kāi)發(fā)，從此再也不用忍受 lvgl/minigui 之類(lèi)各種各樣的一大票用 c 搞出來(lái)的雜七雜八蹩腳又折磨人的 UI 框架(c 框架心智負(fù)擔(dān)太重，很難做到界面與邏輯分離，一旦需求變動(dòng)幾乎就是災(zāi)難)。也許有人會(huì)問(wèn)為什么不用 QT？QT 太龐大，不適合沒(méi)有操作系統(tǒng)的單片機(jī)，再者QT For MCU是商業(yè)軟件不開(kāi)源，slint-ui 支持 GPLv3 許可證(采用GPL協(xié)議，總感覺(jué)有點(diǎn)怪怪的，不知道后續(xù)是否會(huì)步QT后塵全面商用收費(fèi))

關(guān)于移植到 MCU 相關(guān)的信息可以看一下官方文章及項(xiàng)目例程：

1. Slint::mcu - Rust:https://slint-ui.com/releases/0.3.0/docs/rust/slint/docs/mcu/index.html

2. Porting the Slint UI Toolkit to a Microcontroller with 264K RAM — Slint Blog:https://slint-ui.com/blog/porting-slint-to-microcontrollers.html

3. Slint-mcu-rust-template.git:https://github.com/slint-ui/slint-mcu-rust-template.git

界面展示：
打印機(jī)：【查看在線交互演示】:https://slint-ui.com/releases/0.3.0/demos/printerdemo

Rust Slint 簡(jiǎn)單入門(mén)

1. slint 界面代碼嵌入在 Rust 中

新建項(xiàng)目

cargo new rust-ui

添加庫(kù) TOML

[dependencies]
slint = "1.0.0"

main.rs中添加代碼：

fn main() {
    // 運(yùn)行slintUI窗體
    MainWindow::new().run();
}
// slint宏，創(chuàng)建 UI
slint::slint!{
    export component MainWindow inherits Window {
        title: "Main Window";
        width: 600px;
        height: 500px;
        // 定義一個(gè) Text 組件
        Text{
            text: "Hello, world";
            color:blue;
        }
    }
}

上述是將界面 slint 代碼嵌入在 rust 同一個(gè)文件中，slint 聲明式編程來(lái)簡(jiǎn)化 UI 的開(kāi)發(fā)，有 Flutter、Compose 以及其他前端開(kāi)發(fā)經(jīng)驗(yàn)同學(xué)很容易上手。更多組件的使用的請(qǐng)參考開(kāi)發(fā)文檔和 Demo示例

2、界面 slint 文件與 Rust 代碼分開(kāi)

cargo.toml 添加

[build-dependencies]
slint-build = "1.0.0"

添加界面文件，新建 ui/main.slint 文件

import {GroupBox, LineEdit, Button} from "std-widgets.slint";

export component MainWindow inherits Window {
    title: "Main Window";
    width: 600px;
    height: 500px;

    VerticalLayout { 
        alignment:start;
        padding-left: 25px;
        padding-right: 25px;

        Text { 
            font-size: 27px;
            font-weight: 700;
            color: #6776FF;  
         }

        GroupBox{
            title:"lineEdit";
            LineEdit {
                placeholder-text: "enter text";
            }
        }

        Button {
            text: "Click Me";
            clicked => { self.text = "Clicked"; }
        }

    }
}

添加 build.rs 文件

fn main() {
    slint_build::compile("ui/main.slint").unwrap();
}

main.rs 主文件

slint::include_modules!();

fn main() {
   MainWindow::new().unwrap().run().unwrap();
}

建立好的項(xiàng)目文件結(jié)構(gòu)如下：

執(zhí)行命令：cargo run，運(yùn)行效果如下圖，以上所有程序開(kāi)發(fā)均在vs code下完成（依賴(lài)slint官方插件)

注：VSCode插件：slint 語(yǔ)法高亮并可以進(jìn)行界面預(yù)覽 https://marketplace.visualstudio.com/items?itemName=Slint.slint

總結(jié)

Slint 是一個(gè) Rust 編寫(xiě)的綜合性 UI 工具包，定義和提供一系列方便構(gòu)建 UI 的組件，使用了聲明式編程來(lái)簡(jiǎn)化 UI 的開(kāi)發(fā)，可用于為桌面和嵌入式設(shè)備構(gòu)建原生用戶界面。使用 Slint 構(gòu)建的圖形應(yīng)用程序可以在內(nèi)存小于 300 kB 的系統(tǒng)上運(yùn)行，實(shí)事求是的講，內(nèi)存較大的嵌入式設(shè)備上 Android 更占優(yōu)勢(shì)，但是低內(nèi)存的嵌入式設(shè)備(比如單片機(jī))上 Slint 有很大機(jī)會(huì)，總之，Slint 非常適合為嵌入式設(shè)備應(yīng)用程序開(kāi)發(fā) UI。