Rust 使用 Slint 库开发 UI 界面工程搭建教程

use slint::slint;

// 导入 DSL 定义的组件
slint!{
    include!("ui.slint");
}

fn main() {
    // 创建窗口实例
    let main_window = MainWindow::new().unwrap();
    // 运行应用
    main_window.run().unwrap();
}

运行结果:

• 编译执行：cargo run
• 输出窗口显示'Count: 0'，点击按钮数字递增。

关键点解析:

• slint! 宏：将 DSL 编译为 Rust 代码，确保类型安全。
• 属性绑定：in-out property 实现 UI 与数据的自动同步。
• 事件处理：clicked => { ... } 定义内联回调。

5. 核心特性和优势

Slint 提供丰富功能，适合复杂应用开发：

• 高效性能：渲染引擎使用硬件加速，内存占用低，支持 60FPS 流畅动画。
• 跨平台支持：编译为原生二进制或 WebAssembly，无缝部署。
• 状态管理：通过属性系统简化状态变更。
• 工具链集成：支持 Cargo、测试框架和性能分析。
• 无障碍支持：内置屏幕阅读器兼容性。

6. 适用场景和局限性

• 最佳场景：
  • 资源受限设备（如嵌入式系统）。
  • 需要高性能 UI 的应用（如数据可视化工具）。
  • 跨平台项目，减少代码重复。
• 局限性：
  • 学习曲线：DSL 语法需适应，尤其对新手。
  • 社区生态：相比成熟框架（如 GTK），第三方库较少。
  • 移动端支持：仍在完善中，部分功能需手动适配。

推荐实践:

• 原型开发：利用热重载快速迭代 UI。
• 集成后端：结合 Rust 的并发模型（如 async/await）处理业务逻辑。

7. 学习资源

• 官方文档：Slint Book 提供教程和 API 参考。
• 示例项目：GitHub 仓库有完整案例（如 TODO 应用）。
• 社区支持：Discord 或论坛提问。
• 进阶主题：自定义组件、主题系统、性能调试。

Slint 是 Rust GUI 开发的强力工具，结合了现代 UI 设计和高性能。通过声明式语法和原生集成，它能显著提升开发效率。建议从简单项目入手，逐步探索其高级功能。

二、基础开发流程详细介绍

1. Rust 安装及环境搭建

请确保已安装 Rust 开发环境。可通过 rustup 进行安装和管理。

2. 添加 Slint 工具包依赖

打开 Cargo.toml 文件，在 dependencies 下添加 slint = "1.13.1"。

3. 基础界面测试

main.rs 中添加如下代码：

slint::slint! {
    import {Button} from "std-widgets.slint";
    export component MainWindow inherits Window {
        title: "Main Window";
        width: 600px;
        height: 500px;
        Text {
            text: "Hello, world";
            color: blue;
        }
    }
}

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

进入终端输入命令 cargo run，出现界面代表成功。

三、Rust 和 Slint 分离

1. 插件安装

建议在 IDE 中安装 Slint 相关插件以获得更好的编辑体验。

2. 工程依赖添加

打开 Cargo.toml 文件，在 build-dependencies 下添加 slint-build = "1.13.1"。

[package]
name = "ttt"
version = "0.1.0"
edition = "2021"

[dependencies]
slint = "1.13.1"

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

3. 工程搭建

新建 ui 文件夹，并添加 main.slint 文件。

打开 main.slint 文件，选择初始化模板或手动编写 UI 代码。

4. 在弹出的界面中进行 UI 界面布局

保存并查看代码。开始布局，删除自带元素，修改界面尺寸。

import {AboutSlint, VerticalBox, LineEdit, HorizontalBox, Button} from "std-widgets.slint";
export component MainWindow inherits Window {
    height: 600px;
    width: 800px;
    VerticalLayout {
        Text {
            font-size: 20px;
            text: "UserName：";
        }
        LineEdit {
            text: "please input username!";
        }
        Text {
            font-size: 20px;
            text: "Password：";
        }
        LineEdit {
            text: "please input password!";
        }
        Button {
            text: "Button";
        }
        VerticalBox {
            Rectangle {
                min-width: 16px;
                min-height: 16px;
            }
        }
    }
}

5. build.rs 文件创建 (和 Cargo.toml 文件同级)

创建 build.rs 文件，添加以下内容：

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

注意路径，要指向刚新建的 main.slint 文件。

6. main.rs 文件引用 UI

slint::include_modules!();

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

slint::include_modules!(); 的作用是包含刚才的 UI 模块。

7. 结果查看

在终端中输入 cargo run 命令编译运行：

cargo run

观察终端输出及生成的窗口界面。