Skip to content
Slint Docs

`.slint` 文件

你用 Slint 语言编写用户界面，并将其保存为扩展名为 .slint 的文件。

每个 .slint 文件定义一个或多个组件。这些组件声明一棵元素树。 组件构成了 Slint 中组合的基础。用它们来构建你自己可复用的 UI 控件集合。 你可以在另一个组件中，以元素的形式使用每个已声明的组件，只需引用其名字。

下面是组件和元素的示例：

component MyButton inherits Text {
    color: black;
    // ...
}


export component MyApp inherits Window {
    preferred-width: 200px;
    preferred-height: 100px;
    Rectangle {
        width: 200px;
        height: 100px;
        background: green;
    }
    MyButton {
        x:0;y:0;
        text: "hello";
    }
    MyButton {
        y:0;
        x: 50px;
        text: "world";
    }
}
slint

MyButton 和 MyApp 都是组件。Window 和 Rectangle 是 MyApp 使用的内置元素。 MyApp 还把 MyButton 组件复用为两个独立的元素。

元素具有属性，你可以为其赋值。上面的示例把字符串常量 “hello” 赋给第一个 MyButton 的 text 属性。你也可以赋整个表达式。当表达式所依赖的任一属性发生变化时，Slint 会重新求值这些表达式， 这使界面具有响应式。

你可以用 := 语法为元素命名：

component MyButton inherits Text {
    // ...
}


export component MyApp inherits Window {
    preferred-width: 200px;
    preferred-height: 100px;


    hello := MyButton {
        x:0;y:0;
        text: "hello";
    }
    world := MyButton {
        y:0;
        text: "world";
        x: 50px;
    }
}
slint

有些元素还可以通过预定义的名字访问：

  • root 指向组件最外层的元素。
  • self 指向当前元素。
  • parent 指向当前元素的父元素。

这些名字是保留的，你无法重新定义它们。

注释

Section titled “注释”

注释是会被 Slint 编译器忽略的代码行。它们用来解释代码， 或临时禁用代码。

单行注释

Section titled “单行注释”

单行注释用 // 表示，并以换行结束。

// Amazing text! This is a comment
slint

多行注释

Section titled “多行注释”

多行注释用 /* 和 */ 表示，可以跨越多行。

/*
    This is a multi line comment.
    It can span multiple lines.
*/
slint

元素与组件

Section titled “元素与组件”

Slint 语言的核心部分是元素和组件。从技术上讲它们是同一种东西， 所以一旦你学会如何声明和使用其中一个，也就学会了另一个。元素是 Slint 语言的基本构建块， 而组件（也称为控件）是由多个元素和属性组合而成的更大条目。

如果你来自 HTML 或 React 等其他语言，你可能习惯了开闭标签以及自闭合标签。

<!-- opening and closing tag -->
<button>Hello World</button>
<!-- self closing tag -->
<img />
html

Slint 只有一种声明条目的方式：先写 element-name，后跟一组花括号 {}， 其中包含该元素的属性。

// valid
Text {}


Text {
}
// Valid, but considered bad Slint practice
Text
{
}


// Not valid due to terminating semicolon
Text {};
slint

根元素

Section titled “根元素”
component MyApp {
    Text {
        text: "Hello World";
        font-size: 24px;
    }
}
slint

要成为有效的 Slint 文件，根元素必须是一个组件。然后在组件内部，你可以声明任意数量的元素。 这会在后面更详细地解释，此刻不理解也没关系。

属性

Section titled “属性”

属性是赋给元素的值。它们用 property-name: value; 语法设置。

模块

Section titled “模块”

在 .slint 文件中声明的组件可以通过导出和导入， 在其他 .slint 文件中作为元素使用。 默认情况下，.slint 文件中声明的每个类型都是私有的。 导出组件以使其可供其他文件使用，然后在需要的地方导入：

import { Button } from "./button.slint";


export component App inherits Rectangle {
    // ...
    Button {
        // ...
    }
}
slint

元素、全局对象和结构体同样可以被导出和导入。 关于所有形式（包括重命名和再导出），参见语言参考中的 导入和导出 章节。

组件库

Section titled “组件库”

把代码库拆分为独立的模块文件可以促进复用， 并通过允许你隐藏辅助组件来改善封装。这在项目自身的目录结构内运作良好。 要在项目之间共享组件库，又不想硬编码它们的相对路径，请使用组件库语法：

import { MySwitch } from "@mylibrary/switch.slint";
import { MyButton } from "@otherlibrary";
slint

在上面的示例中，MySwitch 组件将从名为 mylibrary 的组件库中导入， Slint 会在其中查找 switch.slint 文件。因此必须声明 mylibrary 指向一个目录， 这样后续对 switch.slint 的查找才能成功。MyButton 将从 otherlibrary 导入。 因此必须声明 otherlibrary 指向一个导出 MyButton 的 .slint 文件。 库既提供组件，也提供图像和字体。 用相同的前缀引用它们，例如 @image-url("@mylibrary/logo.png") 或 import "@mylibrary/MyFont.ttf";。

每个库的路径（无论是文件还是目录）都必须在编译时单独定义。 使用以下方法之一来帮助 Slint 编译器把库解析到磁盘上正确的路径：

  • 在 build.rs 中，调用 with_library_paths 以提供从库名到路径的映射。例如：
// build.rs
fn main() {
    let manifest_dir = std::path::PathBuf::from(std::env::var_os("CARGO_MANIFEST_DIR").unwrap());
    let library_paths = std::collections::HashMap::from([(
        "example".to_string(),
        manifest_dir.join("third_party/example/ui/lib.slint"),
    )]);
    let config = slint_build::CompilerConfiguration::new().with_library_paths(library_paths);
    slint_build::compile_with_config("ui/main.slint", config).unwrap();
}
rust
  • 从命令行调用 slint-viewer 时，为每个组件库传入 -Lmylibrary=/path/to/my/library。
  • 使用 VS Code 扩展时，用 Slint: Library Paths 设置来配置 Slint 扩展的库路径。示例如下： 
    "slint.libraryPaths": {
        "mylibrary": "/path/to/my/library",
        "otherlibrary": "/path/to/otherlib/index.slint",
    },
    json
    这也可以在你提交到仓库的 .vscode/settings.json 文件中编辑。 相对路径会相对于工作区根目录解析。
  • 使用其他编辑器时，你可以配置它们像 slint-viewer 那样，把 -L 参数传给 slint-lsp。

© 2026 SixtyFPS GmbH