本教程向你展示如何使用 Slint 支持的语言作为宿主编程语言。

我们建议使用 Rust 来跟随本教程。

Slint 提供了应用程序模板，你可以使用它们来创建一个已经设置好依赖项并遵循推荐最佳实践的项目。

先决条件

• C++
• NodeJS
• Rust
• Python

在使用该模板之前，你需要一个支持 C++ 20 的 C++ 编译器，并安装 CMake 3.21 或更高版本。

1. 下载并解压 C++ 模板 的 ZIP 压缩包。
2. 重命名解压后的目录并切换到该目录中：

Terminal window

mv slint-cpp-template-main memorycd memory

配置项目

CMakeLists.txt 使用 add_executable(my_application src/main.cpp) 这一行将 src/main.cpp 设置为主要的 C++ 代码文件。

将 src/main.cpp 的内容替换为以下内容：

main_initial.cpp

#include "app-window.h" // generated header from ui/app-window.slint
int main(int argc, char **argv){    auto main_window = MainWindow::create();    main_window->run();}

同样在 CMakeLists.txt 中， slint_target_sources(my_application ui/app-window.slint) 是一个 Slint 函数，用于 将 app-window.slint 文件添加到目标。

将 ui/app-window.slint 的内容替换为以下内容：

app-window.slint

export component MainWindow inherits Window {    Text {        text: "hello world";        color: green;    }}

使用 CMake 进行配置：

Terminal window

cmake -B build

Tip

使用 CMake 进行配置时，FetchContent 模块会通过 git 获取 Slint 的源代码。 第一次构建时这可能需要一些时间，因为该过程需要构建 Slint 运行时和编译器。

使用 CMake 构建：

Terminal window

cmake --build build

运行应用程序

在 Linux 或 macOS 上运行应用程序二进制文件：

Terminal window

./build/my_application

或在 Windows 上：

Terminal window

build\my_application.exe

这将打开一个显示绿色 "Hello World" 问候语的窗口。

如果你在 Windows 机器上逐步完成本教程，可以在每一步使用以下命令运行应用程序：

Terminal window

my_application

1. 下载并解压 Node.js 模板 的 ZIP 压缩包。
2. 重命名解压后的目录并切换到该目录中：

Terminal window

mv slint-nodejs-template-main memorycd memory

3. 使用 npm 安装依赖：

Terminal window

npm install

配置项目

package.json 文件将 src/main.js 引用为应用程序的入口点，src/main.js 又将 memory.slint 引用为 UI 文件。

将 src/main.js 的内容替换为以下内容：

main_initial.js

import * as slint from "slint-ui";
const ui = slint.loadFile(new URL("./ui/app-window.slint", import.meta.url));const mainWindow = new ui.MainWindow();await mainWindow.run();

slint.loadFile 方法从进程的当前工作目录（即 package.json 文件所在的位置）解析文件。

将 ui/app-window.slint 的内容替换为以下内容：

memory.slint

export component MainWindow inherits Window {    Text {        text: "hello world";        color: green;    }}

运行应用程序

使用 npm start 运行示例，将会出现一个显示绿色 "Hello World" 问候语的窗口。

我们建议使用 rust-analyzer 和 Rust 来跟随本教程。

1. 下载并解压 Rust 模板 的 ZIP 压缩包。
2. 重命名解压后的目录并切换到该目录中：

Terminal window

mv slint-rust-template-main memorycd memory

配置项目

将 src/main.rs 的内容替换为以下内容：

slint::include_modules!();
fn main() -> Result<(), slint::PlatformError> {    let main_window = MainWindow::new()?;
    main_window.run()}

将 ui/app-window.slint 的内容替换为以下内容：

memory.slint

export component MainWindow inherits Window {    Text {        text: "hello world";        color: green;    }}

运行应用程序

使用 cargo run 运行示例，将会出现一个显示绿色 "Hello World" 问候语的窗口。

1. 下载并解压 Python 模板 的 ZIP 压缩包。
2. 重命名解压后的目录并切换到该目录中：

Terminal window

mv slint-python-template-main memorycd memory

3. 使用 uv 安装依赖：

Terminal window

uv sync

配置项目

应用程序的入口点是 main.py，UI 文件是 app-window.slint。

将 main.py 的内容替换为以下内容：

main.py

import slint

class MainWindow(slint.loader.ui.app_window.MainWindow):    pass

main_window = MainWindow()main_window.show()main_window.run()

slint.loadFile 方法从进程的当前工作目录（即 package.json 文件所在的位置）解析文件。

将 ui/app-window.slint 的内容替换为以下内容：

memory.slint

export component MainWindow inherits Window {    Text {        text: "hello world";        color: green;    }}

运行应用程序

使用 uv run main.py 运行示例，将会出现一个显示绿色 "Hello World" 问候语的窗口。