Rust UI 框架:Slint UI 简单入门

19,325 阅读5分钟

Slint 1.0 已发布,标志着项目已顺利从开发阶段“毕业”,可正式用于生产环境。

Slint 可用于为各种操作系统和处理器架构开发 UI,包括 Linux、macOS、Windows、WebAssembly、Blackberry QNX 和裸机。它允许开发人员为嵌入式和桌面应用程序创建原生用户界面。

Slint UI介绍

Slint 曾经被称为 SixtyFPS,特点是既快又小,是一个 Rust 编写的综合性 UI 工具包,用于为桌面和嵌入式设备构建原生用户界面。其开发团队希望将 Slint 打造成下一代 GUI 工具包,因此从头开始构建项目时就考虑了可扩展性、包容性、工具性和跨平台兼容性。

  • 流畅:平滑,触摸友好的用户接口
  • 跨平台:目标平台包括嵌入式设备和桌面应用软件(手机和网页)
  • 多语言:可以使用自己擅长的语言API(C++,Rust,JavaScript)
  • 快速设计:适时预览快速迭代

多语言支持的描述,参考官方原文:

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内存的场景中运行,并且需要很少的处理能力。
  • 原生支持:Slint 支持多种目标平台,从嵌入式设备到桌面应用,包括移动设备和 Web。

开发团队表示,使用 Slint 构建的图形应用程序可以在内存小于 300 kB 的系统上运行,例如包含 264kB RAM 和 ARM Cortex-M0+ 处理器的 Raspberry Pi Pico。因此,Slint 非常适合为嵌入式设备应用程序开发 UI。

据介绍,Slint 使用了声明式编程来简化 UI 的开发,优化应用程序开发和性能的方法是:

  • 用声明式语言来描述 UI,使用的语法提供了一种广泛的方式来描述各种图形元素,同时易于阅读、编写和学习
  • Slint 编译器对描述 UI 的代码进行优化并翻译成原生代码
  • 采用任何语言编写的业务逻辑,可通过使用 Slint 提供的特定于语言的 API 与 UI 连接

整体架构

控件支持

示例:

  • 不同平台的原生桌面小部件(Windows、macOS、Linux)

  • WebAssembly

Slint 完全采用 Rust 实现,同时支持不同的编程语言,目前为 C++、JavaScript 和 Rust 提供了 API。

详情查看发布公告

原文链接:www.oschina.net/news/235410…

MCU支持

slint-ui 是嵌入式开发的福音,基于 Rust ,使用了声明式编程来简化 UI 的开发,从此再也不用忍受 lvgl/minigui 之类各种各样的一大票用 c 搞出来的杂七杂八蹩脚又折磨人的 UI 框架(c 框架心智负担太重,很难做到界面与逻辑分离,一旦需求变动几乎就是灾难)。也许有人会问为什么不用 QT?QT 太庞大,不适合没有操作系统的单片机,再者QT For MCU是商业软件不开源,slint-ui 支持 GPLv3 许可证(采用GPL协议,总感觉有点怪怪的,不知道后续是否会步QT后尘全面商用收费)

关于移植到MCU相关的信息可以看一下官方文章及项目例程:

slint::docs::mcu - Rust

Porting the Slint UI Toolkit to a Microcontroller with 264K RAM — Slint Blog

slint-mcu-rust-template.git

界面展示:
打印机:查看在线交互演示

Printer Demo.png

Rust Slint 简单入门

1、slint 界面代码嵌入在 Rust 中

新建项目

cargo new rust-ui

添加库 TOML

[dependencies]
slint = "1.0.0"

main.rs中添加代码:

fn main() {
    // 运行slintUI窗体
   MainWindow::new().unwrap().run().unwrap();
}
// slint宏,创建 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 的开发,有 Flutter、Compose 等开发经验同学很容易上手。

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

建立好的项目文件结构如下:

image.png

执行命令:cargo run,运行效果如下图,以上所有程序开发均在vs code下完成(依赖slint官方插件)

注:VSCode插件:slint 语法高亮并可以进行界面预览 marketplace.visualstudio.com/items?itemN…

界面 slint 文件与 Rust 代码分开.png

总结

Slint 是一个 Rust 编写的综合性 UI 工具包,定义和提供一系列方便构建 UI 的组件,使用了声明式编程来简化 UI 的开发,可用于为桌面和嵌入式设备构建原生用户界面。使用 Slint 构建的图形应用程序可以在内存小于 300 kB 的系统上运行,实事求是的讲,内存较大的嵌入式设备Android更占优势,但是低内存的嵌入式设备(比如单片机)上 Slint 有很大机会,总之,Slint 非常适合为嵌入式设备应用程序开发 UI

参考