企业官网建设流程全解析

Slint Material Design 3 组件库全指南：在 Rust、C++、JavaScript 与 Python 中构建 Material 3 界面

【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C++, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint

导读

本文围绕 Slint 官方开源仓库中的 Material Design 3 组件库（位于 ui-libraries/material）展开，系统讲解这套遵循 Material Design 3 规范（M3）的声明式 UI 组件集的定位、完整组件清单、四种语言接入方式、核心组件 API 以及主题定制体系。读完本文，你将掌握如何在 Android App、嵌入式触屏设备乃至桌面应用中，用 Slint 语言快速搭建符合 Material 3 设计规范的界面，并能够按需定制配色、字体与组件细节。

一、组件库定位：为 Slint 补齐官方 Material 3 组件能力

Slint 是一个开源的声明式 GUI 工具包，可用于开发 Rust、C++、JavaScript（含 Node.js / Deno）和 Python 应用。而 Material Design 3 component set for Slint 是其官方提供的 Material Design 3 组件集，所有组件均严格遵循 M3 设计规范（m3.material.io 的组件与令牌体系），其定位非常明确：

• Android App 开发：提供触摸友好的 Material 组件与导航结构；
• 嵌入式设备：适合触屏类嵌入式界面的快速构建；
• 桌面应用：同样适用于桌面端用户界面开发。

组件库本身采用纯 Slint 语言编写（.slint文件），因此不依赖任何特定渲染后端，凡是 Slint 支持的平台都可以直接使用。社区欢迎贡献与反馈，仓库结构、组件 API 文档与演示程序都在同一仓库内持续演进。

从源码结构看，组件库由四大部分组成（见 src/ 目录）：

二、组件全景：material.slint 导出的 60+ 组件清单

src/material.slint 是该库的唯一公共入口，它以export { ... }形式导出了全部组件、结构与样式。开发者只需要import { ... } from "@material"即可按需引入。按其功能归类如下：

导航与 App 结构：AppBar（含SmallAppBar/MediumAppBar/LargeAppBar三种尺寸）、BottomAppBar、MaterialWindow/MaterialWindowAdapter、NavigationBar、NavigationRail、NavigationDrawer/ModalNavigationDrawer、TabBar/SecondaryTabBar、SearchBar。

按钮：FilledButton、ElevatedButton、OutlinedButton、TextButton、TonalButton、FilledIconButton、OutlineIconButton、TonalIconButton、IconButton、FloatingActionButton（含FABStyle枚举）、SegmentedButton。

选择与输入：CheckBox/CheckBoxTile（含CheckState枚举）、RadioButton/RadioButtonTile、Switch、TextField、Slider、DropDownMenu、DatePickerPopup/DatePickerAdapter、TimePickerPopup/Time。

展示与反馈：Badge、Avatar、ListTile、ListView、SnackBar、ToolTip、Dialog/FullscreenDialog、ModalBottomSheet、Modal、VerticalDivider/HorizontalDivider、CircularProgressIndicator/LinearProgressIndicator、ElevatedCard/FilledCard/OutlinedCard、ActionChip/FilterChip/InputChip、Grid、Horizontal/Vertical、ScrollView、Icon、Elevation、ExtendedTouchArea、StateLayerArea/StateLayer/Ripple。

列表与菜单项：ListItem、MenuItem、NavigationItem/NavigationGroup。

样式全局：MaterialAnimations、MaterialScheme/MaterialSchemes、MaterialStyleMetrics、MaterialPalette、MaterialTypography。

这套组件清单与文档站中的 组件 API 文档 一一对应，每个组件都有独立的.mdx文档页描述属性、回调和函数。

三、快速开始：四种语言如何接入@material组件库

Slint 通过“组件库（component libraries）”机制把外部.slint文件注册为可导入的库名。接入 Material 组件库的通用流程是：将 material.slint 及其依赖目录放入项目，然后在编译配置中把它注册为名为material的库。官方模板分别提供了 Rust、C++、Node.js/Deno、Python 四种语言的起步工程（对应 material-rust-template、material-cpp-template、material-nodejs-template、material-python-template，详见 README 的 Get Started 章节，也可参考 Getting Started 文档）。

Rust：build.rs 中配置 library paths

在 Rust 工程中，需要在build.rs里调用CompilerConfiguration::with_library_paths，将material映射到本地的material.slint文件路径：

// build.rs fn main() { let config = slint_build::CompilerConfiguration::new().with_library_paths( std::collections::HashMap::from([( "material".to_string(), std::path::Path::new(&std::env::var_os("CARGO_MANIFEST_DIR").unwrap()) .join("material-1.0.1/material.slint"), )]), ); slint_build::compile_with_config("ui/main.slint", config).unwrap(); }

其中CARGO_MANIFEST_DIR指向工程根目录，material-1.0.1/是解压后的组件库目录，实际路径请按放置位置调整。

C++：CMake 的 LIBRARY_PATHS

C++ 工程在CMakeLists.txt中通过slint_target_sources的LIBRARY_PATHS参数注册：

slint_target_sources(my_application ui/main.slint LIBRARY_PATHS material=${CMAKE_CURRENT_SOURCE_DIR}/material-1.0.1/material.slint )

Node.js / Deno：loadFile 的 libraryPaths

JavaScript 侧在使用slint.loadFile加载.slint时传入libraryPaths映射：

let ui = slint.loadFile("ui/main.slint", { libraryPaths: { "material": path.join(path.dirname(fileURLToPath(import.meta.url)), "..", "material-1.0.1", "material.slint") } });

Python：load_file 的 library_paths

Python 侧对应slint.load_file的library_paths字典：

ui = slint.load_file( Path(__file__).parent / "ui" / "main.slint", library_paths={ "material": Path(__file__).parent / "material-1.0.1" / "material.slint" }, )

注册完成后，即可在任意.slint文件中使用import { AppBar } from "@material";这样的语法按需引入组件。

四、核心组件实战：从示例到 API

下面选取几个代表性组件，结合其文档页（docs/src/content/docs/components/）与源码实现，演示使用方法与关键 API。所有示例都采用export component Example inherits Window的标准 Slint 写法。

1. AppBar：应用顶栏

AppBar是展示应用标题与可选操作按钮的顶层导航组件（见 app_bar.mdx）：

import { AppBar } from "@material"; export component Example inherits Window { width: 400px; height: 200px; background: transparent; AppBar { title: "My App"; width: parent.width; height: parent.height; } }

其关键属性与回调：

• show-background（bool）：是否显示顶栏背景色，设为false可透明；
• leading-button（IconButtonItem结构体）：顶栏起始处的图标按钮，通常用于返回导航；
• title（string）：顶栏标题文本；
• trailing-button（IconButtonItem结构体）：顶栏末尾的图标按钮，通常承载操作；
• 回调leading-button-clicked()/trailing-button-clicked()：分别在前导、尾随图标被点击时触发。

IconButtonItem结构体包含icon（image）、tooltip（string）、enabled（bool）三个字段，见 collections/structs/IconButtonItem.md。

2. FilledButton：主操作按钮

FilledButton是带实心背景色、代表界面主操作的按钮，视觉权重最高，应谨慎使用（见 filled_button.mdx）：

import { FilledButton } from "@material"; export component Example inherits Window { width: 200px; height: 100px; background: transparent; FilledButton { text: "Click me"; width: 120px; height: 40px; } }

属性包括：enabled（bool，默认true，控制可交互性）、icon（image，可选图标）、text（string，文本标签）、tooltip（string，悬停提示）；回调为clicked()。

3. CheckBox：三态复选框

CheckBox允许用户在多个选项中选择，配合tristate可支持未选中 / 部分选中 / 选中三种状态（见 check_box.mdx）：

import { CheckBox, CheckState } from "@material"; export component Example inherits Window { width: 100px; height: 100px; background: transparent; CheckBox { check-state: CheckState.checked; } }

关键点：

• check-state（CheckState枚举，in-out）：当前状态，取值为unchecked、partially-checked、checked；当处于partially-checked时tristate会被置为true（见 CheckState 枚举定义）；
• enabled（bool，默认true）、has-error（bool，错误态显示）、tristate（bool，是否支持三态）；
• 回调checked-state-changed(check-state: CheckState)；
• 函数toggle()：切换状态，三态模式下按“未选中 → 部分选中 → 选中 → 未选中”循环。

4. Switch：二元开关

Switch用于开关类二元设置，相比复选框视觉提示更突出（见 switch.mdx）：

import { Switch } from "@material"; export component Example inherits Window { width: 200px; height: 100px; background: transparent; Switch { x: 10px; y: 10px; } }

属性：checked（bool，in-out，是否处于开启状态）、enabled（默认true）、off-icon/on-icon（image，两种状态下的可选图标）、tooltip；函数toggle()切换开关；回调checked_state_changed(checked: bool)。

5. NavigationBar：底部导航栏

NavigationBar以图标加标签的行式布局呈现导航项，是移动端应用的主导航常用组件（见 navigation_bar.mdx）：

import { NavigationBar } from "@material"; export component Example inherits Window { width: 400px; height: 200px; background: transparent; NavigationBar { width: parent.width; height: 80px; items: [ { icon: @image-url("../icons/share.svg"), text: "Home" }, { icon: @image-url("../icons/search.svg"), text: "Search" }, { icon: @image-url("../icons/settings.svg"), text: "Settings" } ]; } }

属性：current-index（int，in-out，当前选中项下标）、items（NavigationItem结构体数组）；回调index-changed(index: int)；函数select(index: int)可按下标选中某项。

6. ModalBottomSheet：底部弹层

ModalBottomSheet是从屏幕底部滑出的模态覆盖层，常用于呈现附加选项或内容（见 modal_bottom_sheet.mdx）：

import { ModalBottomSheet } from "@material"; export component Example inherits Window { width: 400px; height: 300px; background: transparent; ModalBottomSheet { width: 320px; height: 200px; } }

除了上述组件，文档站还覆盖了Slider、TextField、SnackBar、ToolTip、Dialog、DatePicker、TimePicker、三种Card、三种Chip、Drawer等全部组件的完整 API，均可从 组件文档目录 按名查阅。

五、主题与样式体系：调色板、配色方案、排版与度量

Material 3 的设计核心是“配色方案 + 设计令牌”。组件库把这套体系封装为若干全局（global）样式对象，全部集中在 src/ui/styling/ 下。

MaterialPalette：M3 全套色彩令牌

material_palette.slint 定义了完整的 M3 调色板，所有属性均为out property <color>，组件内部即通过MaterialPalette.primary、MaterialPalette.on_surface_variant等方式取色。主要分组包括：

• 主色调：primary、on_primary、primary_container、on_primary_container、inverse_primary，以及primary_fixed/primary_fixed_dim/on_primary_fixed/on_primary_fixed_variant一组固定色；
• 次要 / 强调：secondary、tertiary及其container/on_container/fixed系列；
• 错误态：error、on_error、error_container、on_error_container；
• 表面与背景：background、surface、surface_variant、on_surface、on_surface_variant，以及surface_dim、surface_bright和surface_container_lowest到surface_container_highest一整套表面容器层级；
• 轮廓与覆盖：outline、outline_variant、shadow、scrim、inverse_surface、inverse_on_surface；
• 状态层不透明度：state_layer_opacity_hover（8%）、state_layer_opacity_focus（10%）、state_layer_opacity_press（10%）、state_layer_opacity_disabled（12%）、state_layer_opacity_drag（16%）、disable_opacity（38%）；
• 阴影与遮罩：shadow_15/shadow_30（15%/30% 透明度的黑色）、background_modal（50% 透明度黑色模态遮罩）。

MaterialSchemes：亮 / 暗双配色方案

material_schemes.slint 定义了MaterialScheme（约 50 个color字段的完整配色结构）与MaterialSchemes（包含light和dark两套方案）两个结构体。MaterialPalette的所有颜色都由root.scheme.primary、root.scheme.surfaceTint等派生而来，也就是说：修改schemes输入即可整体换肤。仓库中预置的亮色/暗色默认值（如 light 方案的primary: rgb(68, 94, 145)）可直接查看并替换为从 Material Theme Builder 导出的任意 M3 配色方案。

MaterialTypography：M3 排版尺度

material_typography.slint 定义了TextStyle结构体（font_size+font_weight）和一组排版令牌：display_large/medium/small（57/45/36px）、headline_large/medium/small（32/28/24px）、title_large/medium/small（22/16/14px）、label_large/medium/small（14/12/11px）、body_large/medium/small（16/14/12px），并暴露regular（300）、medium（600）、semibold（900）三个字重变量。其中label_medium_prominent是 12px/900 的强调标签样式。

MaterialStyleMetrics：设计度量令牌

material_style_metrics.slint 把 M3 的尺寸体系固化为可复用常量：尺寸刻度（size_1到size_640，如size_40、size_48、size_56对应 M3 的触摸目标/组件高度规范）、图标尺寸（icon_size_18/24/36）、内边距（padding_4至padding_56）、间距（spacing_2至spacing_52）与圆角（border_radius_2/4/8/12/16/28）。

MaterialAnimations 与状态层

样式目录还包含material_animations.slint，配合 state_layer.slint 导出的StateLayerArea/StateLayer/Ripple实现悬停、聚焦、按压等交互态反馈。以 icon_button.slint 为例，其实现同时消费了MaterialPalette、MaterialTypography、MaterialStyleMetrics与Elevation，并通过states语法在checked状态下切换颜色，充分体现样式令牌如何在底层组件中被组合使用——这也是读者自定义组件时可以参考的标准写法。

六、全局结构与枚举：组件的公共数据契约

组件库将跨组件复用的结构与枚举集中定义，文档页见 reference/global-structs-enums.mdx，具体定义见 collections/structs 与 collections/enums：

结构体：

• IconButtonItem：icon（image）、tooltip（string）、enabled（bool）——用于 AppBar 等组件的图标按钮槽位；
• ListItem：列表项数据，gallery 中通过ListItem { text, avatar_background, action_button_icon, .. }构造（见 examples/gallery/src/lib.rs）；
• MenuItem、NavigationItem、NavigationGroup：菜单项与导航项数据（NavigationBar.items即NavigationItem数组）；
• SegmentedItem：SegmentedButton的分段项数据；
• Time：TimePickerPopup使用的时间结构。

枚举：

• CheckState：unchecked、partially-checked、checked（CheckBox 三态）；
• FABStyle：FloatingActionButton 的样式变体；
• LayoutAlignment：布局对齐方式；
• ScrollBarPolicy：滚动条显示策略（用于 ScrollView / ListView 等）。

七、Gallery 演示：从源码运行到跨平台部署

仓库自带完整画廊示例 examples/gallery，覆盖全部组件的实际渲染效果，既是学习参考，也是组件库开发期的手动测试载体。README 同时提供了 WebAssembly 浏览器在线演示与 Android APK 安装包入口。

从 Cargo.toml 可以看到其工程设计的几个要点：

• Rust 依赖：桌面端使用renderer-skia特性，Android 端启用backend-android-activity-06特性，WASM 端通过wasm-bindgen暴露入口（#[cfg_attr(target_arch = "wasm32", wasm_bindgen(start))]）；
• 组件库引入方式：通过相对路径直接引用仓库内的 src/material.slint，说明组件库既可以打包分发，也可以直接从源码目录引用；
• Android 打包：[package.metadata.android]配置了包名com.slint.material、APK 名slint_material、应用名Slint Material，支持一键构建 Android 安装包；
• 界面结构：ui/main.slint 中MainWindow inherits MaterialWindow，设置了preferred-width: 600px、preferred-height: 400px，并指定default-font-family: "Roboto"（Roboto 可变字体随示例提供），同时通过MainWindowAdapter全局对象把窗口尺寸同步到 UI 逻辑。

桌面端运行 gallery 的命令为：

cd ui-libraries/material/examples/gallery cargo run

注意该目录是独立 workspace（见 Cargo.toml 的注释说明），独立于仓库根 workspace，目的是避免拖慢 rust-analyzer / cargo 对库 crate 的索引速度，同时共享根目录的target/构建产物与 profile 设置；开发者可以用rust-analyzer.linkedProjects同时加载两个 workspace。

八、总结

Slint 的 Material Design 3 组件库是一套纯 Slint 语言实现的官方 M3 组件集合：入口文件 material.slint 统一导出 60 余个组件，配合 调色板 / 配色方案 / 排版 / 度量 四层样式令牌体系，实现了从组件到主题的完整 M3 落地；接入方式覆盖 Rust、C++、Node.js/Deno、Python 四种语言，均只需把material.slint注册为@material组件库；每个组件都有独立的 API 文档页 与可运行的 Gallery 演示，并支持打包为 WASM 在线演示与 Android APK。对于希望在 Android、嵌入式触屏或桌面端快速落地 Material 3 设计的 Slint 开发者，这套组件库可以直接作为项目 UI 层的基础设施使用。

【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C++, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint