Slint 快速上手指南：3 个命令写出第一个跨平台原生 GUI 应用

Slint 快速上手指南：3 个命令写出第一个跨平台原生 GUI 应用

【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C++, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint

Slint 是一个开源的声明式 GUI 工具包：界面写在.slint文件里，业务逻辑用 Rust、C++、JavaScript 或 Python 实现，编译后是原生界面，同一套.slint能跑在桌面、浏览器（WebAssembly）和嵌入式设备上。这篇文章不讲原理，只带你从克隆仓库到看到第一个窗口。

什么场景下你会需要它

做一个嵌入式设备的控制面板，UI 要实时更新，但不想在单片机里塞浏览器内核；做一个内部小工具，要同时发给用 Windows、macOS 和 Linux 的同事，又不想维护两套界面代码。这两类需求里，Slint 的定位是：界面只写一份.slint，宿主语言随你熟哪门就用哪门，编译器负责把界面编译成对应语言的代码加原生渲染运行时。

先看结果：跑通长什么样

仓库里demos/weather-demo/是一个天气应用，桌面、Android、WebAssembly 三个目标用的是同一份界面文件。桌面端编译运行的效果：

本文的目标就是打开终端，敲完下面几条命令，得到上面这样的原生窗口。

最短路径一：直接跑官方 Demo

git clone https://gitcode.com/GitHub_Trending/sl/slint cd slint/demos/weather-demo cargo run

前提是本机装好了 Rust 工具链，环境搭建细节见 docs/building.md。第一次构建会连同 Slint 的编译器和运行时一起编译，等几分钟是正常现象，之后都是增量构建。跑起来后窗口里是真实天气数据（来自 Open-Meteo API，无需密钥；WebAssembly 目标则自动改用内置示例数据）。

这一步的价值在于让你确认环境没问题。同一个 Demo 换宿主语言也一样能起，命令放在下面的查表区。

最短路径二：自己写一个窗口

最小工程只需要一个依赖：

[dependencies] slint = "1.16.0"

src/main.rs的全部内容：

slint::slint!{ export component HelloWorld { Text { text: "hello world"; color: green; } } } fn main() { HelloWorld::new().unwrap().run().unwrap(); }

cargo run，窗口就出来了。

这里的关键设计是：界面描述可以直接写在slint!宏里。界面长大后，把它拆成独立的.slint文件，构建时由slint-build编译（各语言模板仓库里都配好了这一步，模板在官方 README 的 Getting Started 一节有列表，依赖已预配置）。

如果只想调界面、一行宿主代码都不想写，装独立查看器：

cargo install slint-viewer slint-viewer ui/app-window.slint --auto-reload

--auto-reload让文件一改预览就刷新，调界面时反馈回路最短，工具源码在tools/viewer/目录。

另外三种语言的入口

两个容易卡住的点：

• C++ 需要支持 C++20 的编译器和 CMake 3.21+。首次cmake -B build会通过 FetchContent 拉取 Slint 源码并从头构建，明显比普通 CMake 工程慢，第一次别怀疑它卡死了。
• Windows 上可执行文件在build\my_application.exe，Linux/macOS 才是./build/my_application。

.slint 文件长什么样

项目 README 里的最小示例，可以直接丢给 slint-viewer 预览：

export component HelloWorld inherits Window { width: 400px; height: 400px; Text { text: "Hello, world"; color: blue; y: parent.width / 2; } }

语法接近 CSS 子集：元素嵌套表达层级，属性赋值定样式，parent.width / 2这种绑定让位置跟随父级几何变化，而不是写死像素。宿主代码里改一个属性，绑定会把变化推到界面上，这是它和"先布局再手动刷新控件"那套思路的根本区别。写法和更多组件用法，直接翻 examples/ 目录，每个例子都是.slint加对应语言的宿主代码成对出现。

VS Code 官方扩展提供.slint的补全和实时预览：

查表区：命令、后端、目录结构

常用命令速查

渲染后端怎么选

渲染后端在编译期通过 slint crate 的 feature 选定：

典型项目结构

my-project/ ├── Cargo.toml # Rust 工程 ├── src/ │ └── main.rs # 业务逻辑 └── ui/ └── app-window.slint # 界面定义

C++ 工程结构相同：CMakeLists.txt里一行slint_target_sources(my_application ui/app-window.slint)就把界面文件挂进了目标。

下一步的三条路

按离桌面端的距离排序：

1. 下放到真机。examples/mcu-board-support里有 ESP32、STM32、RP2040 等现成板级配置，examples/mcu-embassy演示用 software 渲染器在裸机跑；天气 Demo 也能编译到 Android（需要按文档做一次 SDK 初始化）。
2. 塞进浏览器。用 wasm-pack 构建后把index.html拷到输出目录，任意静态服务器即可访问，无需后端。
3. 往下钻。docs/development/ 每个子系统一篇深潜文档——编译器内部、布局系统、属性绑定、item tree——想改 Slint 本身或深入理解它时从这里进。

【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C++, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint