Slint 1.0 已發(fā)布,標志著項目已順利從開發(fā)階段“畢業(yè)”,可正式用于生產(chǎn)環(huán)境。
Slint 可用于為各種操作系統(tǒng)和處理器架構(gòu)開發(fā) UI,包括 Linux、macOS、Windows、WebAssembly、Blackberry QNX 和裸機。它允許 JavaScript 開發(fā)人員為嵌入式和桌面應用程序創(chuàng)建原生用戶界面。
Slint UI 介紹
Slint 曾經(jīng)被稱為 SixtyFPS,特點是既快又小,是一個 Rust 編寫的綜合性 UI 工具包,用于為桌面和嵌入式設備構(gòu)建原生用戶界面。其開發(fā)團隊希望將 Slint 打造成下一代 GUI 工具包,因此從頭開始構(gòu)建項目時就考慮了可擴展性、包容性、工具性和跨平臺兼容性。
多語言支持的描述,參考官方原文:
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 的定位是一個支持多語言、適配任意顯示屏、且高效流暢的用戶圖形接口工具包。設計目標包括:
-
可擴展:在連接到設備的任何屏幕上運行,從臺式計算機到低功耗嵌入式設備。
-
輕量級:能夠在幾百KB內(nèi)存的場景中運行,并且需要很少的處理能力。
-
原生支持:Slint 支持多種目標平臺,從嵌入式設備到桌面應用,包括移動設備和 Web。
開發(fā)團隊表示,使用 Slint 構(gòu)建的圖形應用程序可以在內(nèi)存小于 300 kB 的系統(tǒng)上運行,例如包含 264kB RAM 和 ARM Cortex-M0+ 處理器的 Raspberry Pi Pico。因此,Slint 非常適合為嵌入式設備應用程序開發(fā) UI。

Slint 使用了聲明式編程來簡化 UI 的開發(fā),優(yōu)化應用程序開發(fā)和性能的方法是:
-
用聲明式語言來描述 UI,使用的語法提供了一種廣泛的方式來描述各種圖形元素,同時易于閱讀、編寫和學習
-
Slint 編譯器對描述 UI 的代碼進行優(yōu)化并翻譯成原生代碼
-
采用任何語言編寫的業(yè)務邏輯,可通過使用 Slint 提供的特定于語言的 API 與 UI 連接
整體架構(gòu)

控件支持

示例:
-
不同平臺的原生桌面小部件(Windows、macOS、Linux)



-
WebAssembly

Slint 完全采用 Rust 實現(xiàn),同時支持不同的編程語言,目前為 C++、JavaScript 和 Rust 提供了 API。
詳情查看發(fā)布公告:https://slint-ui.com/blog/announcing-slint-1.0.html
MCU支持
slint-ui 是嵌入式開發(fā)的福音,基于 Rust ,使用了聲明式編程來簡化 UI 的開發(fā),從此再也不用忍受 lvgl/minigui 之類各種各樣的一大票用 c 搞出來的雜七雜八蹩腳又折磨人的 UI 框架(c 框架心智負擔太重,很難做到界面與邏輯分離,一旦需求變動幾乎就是災難)。也許有人會問為什么不用 QT?QT 太龐大,不適合沒有操作系統(tǒng)的單片機,再者QT For MCU是商業(yè)軟件不開源,slint-ui 支持 GPLv3 許可證(采用GPL協(xié)議,總感覺有點怪怪的,不知道后續(xù)是否會步QT后塵全面商用收費)
關(guān)于移植到 MCU 相關(guān)的信息可以看一下官方文章及項目例程:
-
Slint::mcu - Rust:https://slint-ui.com/releases/0.3.0/docs/rust/slint/docs/mcu/index.html
-
Porting the Slint UI Toolkit to a Microcontroller with 264K RAM — Slint Blog:https://slint-ui.com/blog/porting-slint-to-microcontrollers.html
-
Slint-mcu-rust-template.git:https://github.com/slint-ui/slint-mcu-rust-template.git
界面展示:
打印機:【查看在線交互演示】:https://slint-ui.com/releases/0.3.0/demos/printerdemo

Rust Slint 簡單入門
1. slint 界面代碼嵌入在 Rust 中
新建項目
cargo new rust-ui
添加庫 TOML
[dependencies]
slint = "1.0.0"
main.rs中添加代碼:
fn main() {
// 運行slintUI窗體
MainWindow::new().run();
}
// slint宏,創(chuàng)建 UI
slint::slint!{
export component MainWindow inherits Window {
title: "Main Window";
width: 600px;
height: 500px;
// 定義一個 Text 組件
Text{
text: "Hello, world";
color:blue;
}
}
}
上述是將界面 slint 代碼嵌入在 rust 同一個文件中,slint 聲明式編程來簡化 UI 的開發(fā),有 Flutter、Compose 以及其他前端開發(fā)經(jīng)驗同學很容易上手。更多組件的使用的請參考開發(fā)文檔和 Demo示例
2、界面 slint 文件與 Rust 代碼分開
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();
}
建立好的項目文件結(jié)構(gòu)如下:

執(zhí)行命令:cargo run,運行效果如下圖,以上所有程序開發(fā)均在vs code下完成(依賴slint官方插件)
注:VSCode插件:slint 語法高亮并可以進行界面預覽 https://marketplace.visualstudio.com/items?itemName=Slint.slint

總結(jié)
Slint 是一個 Rust 編寫的綜合性 UI 工具包,定義和提供一系列方便構(gòu)建 UI 的組件,使用了聲明式編程來簡化 UI 的開發(fā),可用于為桌面和嵌入式設備構(gòu)建原生用戶界面。使用 Slint 構(gòu)建的圖形應用程序可以在內(nèi)存小于 300 kB 的系統(tǒng)上運行,實事求是的講,內(nèi)存較大的嵌入式設備上 Android 更占優(yōu)勢,但是低內(nèi)存的嵌入式設備(比如單片機)上 Slint 有很大機會,總之,Slint 非常適合為嵌入式設備應用程序開發(fā) UI。
審核編輯 :李倩
-
框架
+關(guān)注
關(guān)注
0文章
404瀏覽量
18429 -
嵌入式設備
+關(guān)注
關(guān)注
0文章
121瀏覽量
17723 -
GUI
+關(guān)注
關(guān)注
3文章
697瀏覽量
43485
原文標題:Rust UI 框架:Slint UI 簡單入門
文章出處:【微信號:Rust語言中文社區(qū),微信公眾號:Rust語言中文社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。
發(fā)布評論請先 登錄
基于i.MX RT106V跨界MCU的智能語音UI邊緣就緒解決方案
RUI Builder 圖形化UI設計工具
分享---儲能UI界面能量流動動畫實現(xiàn)方法
分享---簡單快速實現(xiàn)烘烤設備UI界面的方法
HarmonyOS AI輔助編程工具(CodeGenie)UI生成
【 HarmonyOS 5 入門系列 】鴻蒙HarmonyOS示例項目講解
ArkUI介紹
UI開發(fā)概述
HarmonyOS NEXT應用元服務布局優(yōu)化ArkUI框架執(zhí)行流程
UIAbility組件與UI的數(shù)據(jù)同步介紹
基于RV1126開發(fā)板實現(xiàn)簡單的UI開發(fā)示例
AWTK:一鍵切換皮膚,打造個性化UI
Rust UI框架:Slint UI簡單入門
評論