【跟小嘉学 Rust 编程】三十、Rust 使用 Slint UI

系列文章目录

【跟小嘉学 Rust 编程】一、Rust 编程基础
【跟小嘉学 Rust 编程】二、Rust 包管理工具使用
【跟小嘉学 Rust 编程】三、Rust 的基本程序概念
【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念
【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据
【跟小嘉学 Rust 编程】六、枚举和模式匹配
【跟小嘉学 Rust 编程】七、使用包(Packages)、单元包(Crates)和模块(Module)来管理项目
【跟小嘉学 Rust 编程】八、常见的集合
【跟小嘉学 Rust 编程】九、错误处理(Error Handling)
【跟小嘉学 Rust 编程】十一、编写自动化测试
【跟小嘉学 Rust 编程】十二、构建一个命令行程序
【跟小嘉学 Rust 编程】十三、函数式语言特性：迭代器和闭包
【跟小嘉学 Rust 编程】十四、关于 Cargo 和 Crates.io
【跟小嘉学 Rust 编程】十五、智能指针(Smart Point)
【跟小嘉学 Rust 编程】十六、无畏并发(Fearless Concurrency)
【跟小嘉学 Rust 编程】十七、面向对象语言特性
【跟小嘉学 Rust 编程】十八、模式匹配(Patterns and Matching)
【跟小嘉学 Rust 编程】十九、高级特性
【跟小嘉学 Rust 编程】二十、进阶扩展
【跟小嘉学 Rust 编程】二十一、网络编程
【跟小嘉学 Rust 编程】二十三、Cargo 使用指南
【跟小嘉学 Rust 编程】二十四、内联汇编(inline assembly)
【跟小嘉学 Rust 编程】二十五、Rust命令行参数解析库(clap)
【跟小嘉学 Rust 编程】二十六、Rust的序列化解决方案(Serde)
【跟小嘉学 Rust 编程】二十七、Rust 异步编程(Asynchronous Programming)
【跟小嘉学 Rust 编程】二十八、Rust中的日期与时间
【跟小嘉学 Rust 编程】二十九、Rust 中的零拷贝序列化解决方案(rkyv)
【跟小嘉学 Rust 编程】三十、Rust 使用 Slint UI

前言

本章节 Slint UI 介绍，这是一个支持多语言(Rust/CPP/javascript)的、跨平台的、简单易用、高效执行的 UI库，Slint 是一个类似 QML 的标记语言，经过编译器 slinit compile 可完整的转换成CPP或者 Rust，其开发方式类似与QML+CPP。

主要教材参考 《The Rust Programming Language》
主要教材参考 《Rust For Rustaceans》
主要教材参考 《The Rustonomicon》
主要教材参考 《Rust 高级编程》
主要教材参考 《Cargo 指南》
主要教材参考 《Rust 异步编程》

---

一、 Slint UI 介绍

1.1、 Slint UI 介绍

Slint UI 介绍，这是一个支持多语言(Rust/CPP/javascript)的、跨平台的、简单易用、高效执行的 UI库，Slint 是一个类似 QML 的标记语言，经过编译器 slinit compile 可完整的转换成CPP或者 Rust，其开发方式类似与QML+CPP。

1.2、Slint 优点

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

1.3、目标

slint 定位是一个可多语言、可任意显示屏适配的高效流畅的用户图形接口工具包。设计目标包括如下几点

• 简便：编码或设计人员能有成就感并能享受开发和设计的过程。APIs不管在哪种语言下都保证一致性、简单易用、符合直观感觉。文档介绍API时应注重观念的传授及api如何使用
• 轻量：能够适用于几百K的内存及低功耗设备。
• 本地化：slint支持多种多样的目标平台，从嵌入式设备到桌面应用包括手机和网页。用户和开发者都应感受不到与当前使用平台的差异。不管是外观还是主观感觉还是经验都应符合用户对本地应用的期望

1.4、许可证

需要注意它采用的 GPLv3 以及商业许可证。

二、快速开始

2.1、创建工程

cargo new slint_learn

2.2、添加依赖

cargo add slint

2.3、添加代码

slint::slint!{
    export component MainWindow inherits Window {
        width: 300px;
        height: 300px;
        title: "第一个slint程序";
        Text {
            text: "hello world";
            color: green;
        }
    }
}

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

运行结果

三、Slint和 Rust 分离

3.1、添加依赖

cargo add slint-build --build

3.2、添加 hello.slint

在src 目录下创建一个 components/hello.slint 文件

export component MainWindow inherits Window {
    width: 300px;
    height: 300px;
    title: "第一个slint程序";
    Text {
        text: "hello world";
        color: green;
    }
}

3.3、创建 build.rs

fn main(){
    slint_build::compile("src/components/hello.slint").unwrap();
}

3.4、main.rs

slint::include_modules!();

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

总结