入门

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

我们建议使用 我们为 Slint 提供的编辑器集成 来跟随本教程。

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

前置条件

Rust

我们建议使用 rust-analyzer 和 我们为 Slint 提供的编辑器集成 来跟随本教程。

1. 下载并解压 Rust 模板 的 ZIP 归档。
2. 重命名解压后的目录并进入其中：

mv slint-rust-template-main memory
cd memory

bash

配置项目

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

slint::include_modules!();

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

    main_window.run()
}

rust

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

memory.slint

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

运行应用

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

C++

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

1. 下载并解压 C++ 模板 的 ZIP 归档。
2. 重命名解压后的目录并进入其中：

mv slint-cpp-template-main memory
cd memory

bash

配置项目

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 进行配置：

cmake -B build

bash

提示

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

使用 CMake 构建：

cmake --build build

bash

运行应用

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

./build/my_application

bash

在 Windows 上则运行：

build\my_application.exe

bash

这会打开一个显示绿色 “Hello World” 问候语的窗口。

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

my_application

bash

NodeJS

1. 下载并解压 Node.js 模板 的 ZIP 归档。
2. 重命名解压后的目录并进入其中：

mv slint-nodejs-template-main memory
cd memory

bash

3. 使用 npm 安装依赖：

npm install

bash

配置项目

package.json 文件将 src/main.js 引用为应用的入口点，而 src/main.js 将 ui/app-window.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” 问候语的窗口。

Python

1. 下载并解压 Python 模板 的 ZIP 归档。
2. 重命名解压后的目录并进入其中：

mv slint-python-template-main memory
cd memory

bash

3. 使用 uv 安装依赖：

uv sync

bash

配置项目

应用的入口点是 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.load_file 方法从进程的当前工作目录解析文件，也就是从 main.py 文件所在的位置。

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

memory.slint

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

运行应用

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