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/ 目录部分路径作用组件实现src/ui/components/约 50 个.slint组件文件是组件库主体样式体系src/ui/styling/调色板、配色方案、排版、度量、动画等全局样式统一入口src/material.slint集中导出全部组件、结构与样式供material库引用演示应用examples/gallery覆盖全组件的画廊示例Gallery二、组件全景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 文档。Rustbuild.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/是解压后的组件库目录实际路径请按放置位置调整。CCMake 的 LIBRARY_PATHSC 工程在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 / DenoloadFile 的 libraryPathsJavaScript 侧在使用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) } });Pythonload_file 的 library_pathsPython 侧对应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.mdximport { 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-backgroundbool是否显示顶栏背景色设为false可透明leading-buttonIconButtonItem结构体顶栏起始处的图标按钮通常用于返回导航titlestring顶栏标题文本trailing-buttonIconButtonItem结构体顶栏末尾的图标按钮通常承载操作回调leading-button-clicked()/trailing-button-clicked()分别在前导、尾随图标被点击时触发。IconButtonItem结构体包含iconimage、tooltipstring、enabledbool三个字段见 collections/structs/IconButtonItem.md。2. FilledButton主操作按钮FilledButton是带实心背景色、代表界面主操作的按钮视觉权重最高应谨慎使用见 filled_button.mdximport { FilledButton } from material; export component Example inherits Window { width: 200px; height: 100px; background: transparent; FilledButton { text: Click me; width: 120px; height: 40px; } }属性包括enabledbool默认true控制可交互性、iconimage可选图标、textstring文本标签、tooltipstring悬停提示回调为clicked()。3. CheckBox三态复选框CheckBox允许用户在多个选项中选择配合tristate可支持未选中 / 部分选中 / 选中三种状态见 check_box.mdximport { CheckBox, CheckState } from material; export component Example inherits Window { width: 100px; height: 100px; background: transparent; CheckBox { check-state: CheckState.checked; } }关键点check-stateCheckState枚举in-out当前状态取值为unchecked、partially-checked、checked当处于partially-checked时tristate会被置为true见 CheckState 枚举定义enabledbool默认true、has-errorbool错误态显示、tristatebool是否支持三态回调checked-state-changed(check-state: CheckState)函数toggle()切换状态三态模式下按“未选中 → 部分选中 → 选中 → 未选中”循环。4. Switch二元开关Switch用于开关类二元设置相比复选框视觉提示更突出见 switch.mdximport { Switch } from material; export component Example inherits Window { width: 200px; height: 100px; background: transparent; Switch { x: 10px; y: 10px; } }属性checkedboolin-out是否处于开启状态、enabled默认true、off-icon/on-iconimage两种状态下的可选图标、tooltip函数toggle()切换开关回调checked_state_changed(checked: bool)。5. NavigationBar底部导航栏NavigationBar以图标加标签的行式布局呈现导航项是移动端应用的主导航常用组件见 navigation_bar.mdximport { 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-indexintin-out当前选中项下标、itemsNavigationItem结构体数组回调index-changed(index: int)函数select(index: int)可按下标选中某项。6. ModalBottomSheet底部弹层ModalBottomSheet是从屏幕底部滑出的模态覆盖层常用于呈现附加选项或内容见 modal_bottom_sheet.mdximport { 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/ 下。MaterialPaletteM3 全套色彩令牌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_hover8%、state_layer_opacity_focus10%、state_layer_opacity_press10%、state_layer_opacity_disabled12%、state_layer_opacity_drag16%、disable_opacity38%阴影与遮罩shadow_15/shadow_3015%/30% 透明度的黑色、background_modal50% 透明度黑色模态遮罩。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 配色方案。MaterialTypographyM3 排版尺度material_typography.slint 定义了TextStyle结构体font_sizefont_weight和一组排版令牌display_large/medium/small57/45/36px、headline_large/medium/small32/28/24px、title_large/medium/small22/16/14px、label_large/medium/small14/12/11px、body_large/medium/small16/14/12px并暴露regular300、medium600、semibold900三个字重变量。其中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结构体IconButtonItemiconimage、tooltipstring、enabledbool——用于 AppBar 等组件的图标按钮槽位ListItem列表项数据gallery 中通过ListItem { text, avatar_background, action_button_icon, .. }构造见 examples/gallery/src/lib.rsMenuItem、NavigationItem、NavigationGroup菜单项与导航项数据NavigationBar.items即NavigationItem数组SegmentedItemSegmentedButton的分段项数据TimeTimePickerPopup使用的时间结构。枚举CheckStateunchecked、partially-checked、checkedCheckBox 三态FABStyleFloatingActionButton 的样式变体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: RobotoRoboto 可变字体随示例提供同时通过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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Slint Material Design 3 组件库全指南：在 Rust、C++、JavaScript 与 Python 中构建 Material 3 界面
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/ 目录部分路径作用组件实现src/ui/components/约 50 个.slint组件文件是组件库主体样式体系src/ui/styling/调色板、配色方案、排版、度量、动画等全局样式统一入口src/material.slint集中导出全部组件、结构与样式供material库引用演示应用examples/gallery覆盖全组件的画廊示例Gallery二、组件全景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 文档。Rustbuild.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/是解压后的组件库目录实际路径请按放置位置调整。CCMake 的 LIBRARY_PATHSC 工程在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 / DenoloadFile 的 libraryPathsJavaScript 侧在使用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) } });Pythonload_file 的 library_pathsPython 侧对应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.mdximport { 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-backgroundbool是否显示顶栏背景色设为false可透明leading-buttonIconButtonItem结构体顶栏起始处的图标按钮通常用于返回导航titlestring顶栏标题文本trailing-buttonIconButtonItem结构体顶栏末尾的图标按钮通常承载操作回调leading-button-clicked()/trailing-button-clicked()分别在前导、尾随图标被点击时触发。IconButtonItem结构体包含iconimage、tooltipstring、enabledbool三个字段见 collections/structs/IconButtonItem.md。2. FilledButton主操作按钮FilledButton是带实心背景色、代表界面主操作的按钮视觉权重最高应谨慎使用见 filled_button.mdximport { FilledButton } from material; export component Example inherits Window { width: 200px; height: 100px; background: transparent; FilledButton { text: Click me; width: 120px; height: 40px; } }属性包括enabledbool默认true控制可交互性、iconimage可选图标、textstring文本标签、tooltipstring悬停提示回调为clicked()。3. CheckBox三态复选框CheckBox允许用户在多个选项中选择配合tristate可支持未选中 / 部分选中 / 选中三种状态见 check_box.mdximport { CheckBox, CheckState } from material; export component Example inherits Window { width: 100px; height: 100px; background: transparent; CheckBox { check-state: CheckState.checked; } }关键点check-stateCheckState枚举in-out当前状态取值为unchecked、partially-checked、checked当处于partially-checked时tristate会被置为true见 CheckState 枚举定义enabledbool默认true、has-errorbool错误态显示、tristatebool是否支持三态回调checked-state-changed(check-state: CheckState)函数toggle()切换状态三态模式下按“未选中 → 部分选中 → 选中 → 未选中”循环。4. Switch二元开关Switch用于开关类二元设置相比复选框视觉提示更突出见 switch.mdximport { Switch } from material; export component Example inherits Window { width: 200px; height: 100px; background: transparent; Switch { x: 10px; y: 10px; } }属性checkedboolin-out是否处于开启状态、enabled默认true、off-icon/on-iconimage两种状态下的可选图标、tooltip函数toggle()切换开关回调checked_state_changed(checked: bool)。5. NavigationBar底部导航栏NavigationBar以图标加标签的行式布局呈现导航项是移动端应用的主导航常用组件见 navigation_bar.mdximport { 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-indexintin-out当前选中项下标、itemsNavigationItem结构体数组回调index-changed(index: int)函数select(index: int)可按下标选中某项。6. ModalBottomSheet底部弹层ModalBottomSheet是从屏幕底部滑出的模态覆盖层常用于呈现附加选项或内容见 modal_bottom_sheet.mdximport { 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/ 下。MaterialPaletteM3 全套色彩令牌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_hover8%、state_layer_opacity_focus10%、state_layer_opacity_press10%、state_layer_opacity_disabled12%、state_layer_opacity_drag16%、disable_opacity38%阴影与遮罩shadow_15/shadow_3015%/30% 透明度的黑色、background_modal50% 透明度黑色模态遮罩。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 配色方案。MaterialTypographyM3 排版尺度material_typography.slint 定义了TextStyle结构体font_sizefont_weight和一组排版令牌display_large/medium/small57/45/36px、headline_large/medium/small32/28/24px、title_large/medium/small22/16/14px、label_large/medium/small14/12/11px、body_large/medium/small16/14/12px并暴露regular300、medium600、semibold900三个字重变量。其中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结构体IconButtonItemiconimage、tooltipstring、enabledbool——用于 AppBar 等组件的图标按钮槽位ListItem列表项数据gallery 中通过ListItem { text, avatar_background, action_button_icon, .. }构造见 examples/gallery/src/lib.rsMenuItem、NavigationItem、NavigationGroup菜单项与导航项数据NavigationBar.items即NavigationItem数组SegmentedItemSegmentedButton的分段项数据TimeTimePickerPopup使用的时间结构。枚举CheckStateunchecked、partially-checked、checkedCheckBox 三态FABStyleFloatingActionButton 的样式变体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: RobotoRoboto 可变字体随示例提供同时通过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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
