你可以通过选择一种样式来修改这些控件的外观。

可用的样式包括：

样式名称	浅色变体	深色变体	描述
fluent	fluent-light	fluent-dark	这些变体属于 Fluent 样式，基于 Fluent Design System。
material	material-light	material-dark	这些变体属于 Material 样式，遵循 Material Design。
cupertino	cupertino-light	cupertino-dark	Cupertino 变体模拟 macOS 使用的样式。
cosmic	cosmic-light	cosmic-dark	Cosmic 变体模拟 Cosmic Desktop 使用的样式。
qt			Qt 样式使用 Qt 来渲染控件。此样式要求你的系统上安装了 Qt。
native			这是根据平台对其他样式之一的别名。在 macOS 上为 cupertino，在 Windows 上为 fluent，在 Android 上为 material，在 Linux 上如果 Qt 可用则为 qt，否则为 fluent。

默认情况下，样式会自动适应系统的深色或浅色颜色设置。选择 -light 或 -dark 变体可覆盖系统设置，并始终显示深色或浅色颜色。

控件样式是在项目编译时确定的。选择样式的方法取决于你使用 Slint 的方式。

如果未选择样式，则默认为 native。

• Rust
• C++
• NodeJS
• Python

你可以通过将 SLINT_STYLE 环境变量设置为你所选样式的名称，在编译之前选择样式。

在使用 slint_build API 时，调用 slint_build::compile_with_config() 函数。

在使用 slint_interpreter API 时，调用 slint_interpreter::ComponentCompiler::set_style() 函数。

定义一个 SLINT_STYLE CMake 缓存变量以包含样式名称（字符串）。例如，可以在命令行上执行此操作：

Terminal window

cmake -DSLINT_STYLE="material" /path/to/source

你可以通过在传递给 loadFile 的 LoadFileOptions 中设置 style 属性来选择样式：

import * as slint from "slint-ui";let ui = slint.loadFile("main.slint", { style: "fluent" });let main = new ui.Main();main.greeting = "Hello friends";

你可以通过在 Python 脚本的开头设置 SLINT_STYLE 环境变量来指定样式：

import slintimport os

os.environ["SLINT_STYLE"] = "material"# 或# os.environ.setdefault("SLINT_STYLE", "material")

class MainWindow(slint.loader.ui.app.AppWindow): ...

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

在你自己的组件中使用样式属性

可以访问全局 Palette 和 StyleMetrics 属性，它们将被设置为当前样式的相应值。

import { Palette, StyleMetrics } from "std-widgets.slint";
export component Example inherits Window {    Rectangle {        border-radius: StyleMetrics.layout-padding;        border-width: 2px;        border-color: Palette.border;        background: Palette.background;    }}

在某些特定属性不可用的情况下，你可以通过 Platform.style-name 来检测样式。

import { Palette } from "std-widgets.slint";
export component Example inherits Window {    Rectangle {        border-radius: Platform.style-name == "fluent" ? 4px : 2px;        border-width: Platform.style-name == "fluent" ? 2px : 1px;        border-color: Palette.border;        background: Palette.background;    }}

使用 slint-viewer 预览设计

通过设置 SLINT_STYLE 环境变量，或通过 --style 参数传递样式名称来选择样式：

slint-viewer —style material /path/to/design.slint

使用 Slint Visual Studio Code 扩展预览设计

要选择样式，首先打开 Visual Studio Code 设置编辑器：

• Windows
• macOS
• Linux

File > Preferences > Settings

Code > Preferences > Settings

File > Preferences > Settings

然后在 Extensions > Slint > Preview:Style 中输入样式名称

使用通用 LSP 进程预览设计

通过在启动进程之前设置 SLINT_STYLE 环境变量来选择样式。 或者，如果你的 IDE 集成允许使用命令行参数，则可以使用 --style 来指定样式。