组件样式

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

可用的样式包括：

样式名称	浅色变体	深色变体	描述
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。

如果未选择样式，则 fluent 是所有平台上的默认样式。

Rust

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

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

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

C++

定义一个 SLINT_STYLE CMake 缓存变量，将样式名称作为字符串包含在其中。例如，可以在命令行上完成：

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

bash

NodeJS

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

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

js

Python

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

import slint
import os


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


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


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

python

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

可以访问全局 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;
    }
}

slint

当特定属性不可用时，你可以通过 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

使用 slint-viewer 预览设计

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

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

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

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

Windows

File > Preferences > Settings

macOS

Code > Preferences > Settings

Linux

File > Preferences > Settings

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

使用通用 LSP 进程预览设计

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