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/slintSlint 是一个开源的声明式 GUI 工具包界面写在.slint文件里业务逻辑用 Rust、C、JavaScript 或 Python 实现编译后是原生界面同一套.slint能跑在桌面、浏览器WebAssembly和嵌入式设备上。这篇文章不讲原理只带你从克隆仓库到看到第一个窗口。什么场景下你会需要它做一个嵌入式设备的控制面板UI 要实时更新但不想在单片机里塞浏览器内核做一个内部小工具要同时发给用 Windows、macOS 和 Linux 的同事又不想维护两套界面代码。这两类需求里Slint 的定位是界面只写一份.slint宿主语言随你熟哪门就用哪门编译器负责把界面编译成对应语言的代码加原生渲染运行时。先看结果跑通长什么样仓库里demos/weather-demo/是一个天气应用桌面、Android、WebAssembly 三个目标用的是同一份界面文件。桌面端编译运行的效果本文的目标就是打开终端敲完下面几条命令得到上面这样的原生窗口。最短路径一直接跑官方 Demogit 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.0src/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/目录。另外三种语言的入口语言模板仓库入口文件运行命令Rustslint-rust-templatesrc/main.rscargo runCslint-cpp-templatesrc/main.cppcmake -B build 然后 cmake --build buildJavaScriptslint-nodejs-templatesrc/main.jsnpm install 然后 npm startPythonslint-python-templatemain.pyuv sync 然后 uv run main.py两个容易卡住的点C 需要支持 C20 的编译器和 CMake 3.21。首次cmake -B build会通过 FetchContent 拉取 Slint 源码并从头构建明显比普通 CMake 工程慢第一次别怀疑它卡死了。Windows 上可执行文件在build\my_application.exeLinux/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的补全和实时预览查表区命令、后端、目录结构常用命令速查操作命令运行天气 DemoRust进入 demos/weather-demo 后 cargo run构建 C 工程cmake -B build cmake --build build运行天气 DemoNode.jspnpm install pnpm start预览单个 .slint 文件slint-viewer 文件.slint构建到 WebAssemblywasm-pack build --target web --out-dir 输出目录/pkg构建并运行 Androidcargo apk run --lib渲染后端怎么选渲染后端在编译期通过 slint crate 的 feature 选定后端特点适用场景femtovg基于 OpenGL ES 2.0默认后端有 GPU 的通用设备skia基于 Skia 2D 图形库需要成熟绘制管线software纯 CPU零额外依赖无 GPU 的 MCU 等qt 风格系统装了 Qt 时可选控件外观跟随系统想要原生观感的桌面应用典型项目结构my-project/ ├── Cargo.toml # Rust 工程 ├── src/ │ └── main.rs # 业务逻辑 └── ui/ └── app-window.slint # 界面定义C 工程结构相同CMakeLists.txt里一行slint_target_sources(my_application ui/app-window.slint)就把界面文件挂进了目标。下一步的三条路按离桌面端的距离排序下放到真机。examples/mcu-board-support里有 ESP32、STM32、RP2040 等现成板级配置examples/mcu-embassy演示用 software 渲染器在裸机跑天气 Demo 也能编译到 Android需要按文档做一次 SDK 初始化。塞进浏览器。用 wasm-pack 构建后把index.html拷到输出目录任意静态服务器即可访问无需后端。往下钻。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考