# Slint GUI 专家使用 Slint 和 Rust 开发现代 GUI 应用程序的综合指南。该技能直接从官方 Slint 存储库构建，涵盖从基本组件创建到高级性能优化和跨平台部署的所有内容。 ## 🎯 官方教程入门最好的开始方法是遵循官方教程： 1. **从这里开始** : `@source/docs/astro/src/content/docs/tutorial/quickstart.mdx` 2. **基本项目** ：使用 `templates/basic-app/` 3. **示例研究**：回顾`@source/examples/memory/` 4. **参考**：浏览`@source/examples/gallery/` ### 使用模板快速入门 # 使用我们预先配置的模板 cp -r 模板/basic-app/ my-first-slint-app/ cd my-first-slint-app/ 货物运行 ## 快速入门 ### 基本 Slint 应用 // 货物.toml [依赖项] 斯林特=“1.13” // main.rs 斯林特::斯林特！ { 导出组件AppWindow继承Window { 文本{ 文本：“你好，斯林特！”；颜色：#3498db；字体大小：24px；水平对齐：居中； } } } fn main() -> Result<(), slint::PlatformError> { 让应用程序 = AppWindow::new()?; 应用程序.run() } ### 项目结构我的-slint-应用程序/ ├── Cargo.toml ├── 构建.rs └── 源文件/ ├── main.rs └── 用户界面/ └── main.slint ## 核心概念 ### 1\.组件架构 **组件定义** 导出组件Button继承Rectangle { property text: "点击我"; 属性<颜色>背景颜色：#3498db；属性启用：true；回调点击(); 背景：背景颜色；边框半径：8px；文本{ 文本：根.文本；颜色：启用？白色：#cccccc；水平对齐：居中；垂直对齐：居中； } 触摸区域{ 启用：root.启用；点击 => { root.clicked(); } } } **Rust 集成** slint::include_modules!(); fn main() -> Result<(), slint::PlatformError> { 让 main_window = MainWindow::new()?; 让 window_weak = main_window.as_weak(); main_window.on_submit_clicked(移动 || { 让窗口= window_weak.unwrap(); println!("提交按钮被点击！"); }); main_window.run() } ### 2\.布局系统 **垂直布局** 导出组件LoginScreen继承Window { 垂直布局 { 间距：20px；内边距：40px；文本{ 文本：“登录”；字体大小：32px；字体粗细：粗体； } 文本输入{ 占位符文本：“用户名”； } 文本输入{ 占位符文本：“密码”；输入类型：密码； } 按钮{ 文本：“登录”； clicked => { /* 登录逻辑 */ } } } } **网格布局** 导出组件Dashboard继承Window { 网格布局{ 间距：10px；内边距：20px；行[1,2,3]{ 列[1] { Text { text: "收入"; } 文本 { 文本：“$10,234”;字体大小：24px； } } } } } ### 3\.数据绑定和状态管理 **属性和绑定** 导出组件Counter继承Window { 属性计数：0；属性状态：计数 > 10 ？ “高”：“低”；垂直布局 { 文本{ 文本：“计数：” + 计数；字体大小：24px； } 按钮{ 文本：“+”；点击 => { 计数 += 1; } } } } **Rust 状态集成** 使用 slint::{SharedString, ModelRc, VecModel}; fn main() -> Result<(), slint::PlatformError> { 让应用程序 = MainWindow::new()?; 让 items = VecModel::from(vec![ SharedString::from("项目 1"), SharedString::from("项目 2"), ]); app.set_items(ModelRc::new(items)); 应用程序.run() } ### 4\.样式和主题 **定制样式** 导出组件 ThemedApp 继承 Window { @主题.primary := #3498db; @theme.secondary := #2ecc71; 背景：@theme.background；文本{ 文本：“主题应用程序”；颜色：@theme.text； } 按钮{ 文本：“主要行动”；背景：@theme.primary； } } ### 5\.动画 **属性动画** 导出组件 AnimatedButton 继承 Rectangle { 属性<颜色>悬停颜色：#3498db；属性比例：1.0；背景：悬停颜色；边框半径：8px；动画缩放{持续时间：200ms;缓动的：缓出； } 动画悬停颜色{持续时间：300ms; } 触摸区域{ 鼠标输入 => { 根.scale = 1.1; root.hover-color = #2980b9; } 鼠标退出=> { 根.scale = 1.0; root.hover-color = #3498db; } } } ## 📚 官方资源和学习材料 ### 🎯 初级学习路径（推荐） 1. **官方教程** : `@source/docs/astro/src/content/docs/tutorial/` \- 完整的记忆游戏教程 2. **工作示例** : `@source/examples/memory/` \- 教程实现 3. **组件参考** : `@source/examples/gallery/` \- 所有 UI 组件 4. **语言指南** : `@source/docs/astro/src/content/docs/guide/language/` \- 完整语法参考 ### 📖 官方文档此技能包括完整的官方 Slint 存储库，作为 `source/` 目录中的 git 子模块： * **🎓 教程** : `@source/docs/astro/src/content/docs/tutorial/` \- 逐步学习 * **📋 语言** : `@source/docs/astro/src/content/docs/guide/language/` \- 完整的语言规范 * **🔧 API** : `@source/api/rs/slint/` \- Rust API 文档 * **💎 示例** : `@source/examples/` \- 广泛的工作示例 * **🎨 UI 库** : `@source/ui-libraries/` \- Material & Fluent 组件 ### 🛠️ 特定技能资源 * **[docs/]()** \- 官方文档导航指南 * **[examples/]()** \- 带有官方示例的精选学习路径 * **[templates/]()** \- 即用型项目模板 * **[SOURCE_STRUCTURE.md]()** \- 完整的技能结构映射 ## 快速参考 ### 基本 API * `slint::slint!{}` \- 内联定义 .slint 组件 * `slint::include_modules!()` \- 从构建中包含 .slint 文件 * `Component::new()?` \- 创建组件实例 * `window.as_weak()` \- 获取回调的弱引用 * `ModelRc::new(VecModel::from(...))` \- 创建数据模型 ### 项目结构我的应用程序/ ├── Cargo.toml ├── 构建.rs ├── src/ │ ├── main.rs │ └── 用户界面/ │ └── main.slint └── 资产/ ├── 图标/ └── 图片/ ### 常见模式 * 使用属性进行组件配置 * 优先选择组合而不是继承 * 回调使用弱引用以避免循环 * 在 Rust 集成中实现正确的错误处理 ## 故障排除 **常见问题：** * 编译错误：检查 `.slint` 语法和 Rust 集成 * 性能问题：优化布局复杂度和数据模型 * 内存泄漏：使用弱引用和适当的清理 * 特定于平台的错误：尽早在目标平台上进行测试 **调试技术：** * 使用 `slint::debug_log!()` 进行日志记录 * 在构建配置中启用调试模式 * 使用不同的渲染后端进行测试 * 分析内存使用情况和渲染性能 > 请参阅 [references/ADVANCED.md]() 了解高级主题，包括自定义组件、性能优化和跨平台开发。请参阅 [references/PATTERNS.md]() 了解常见的 UI 模式，例如表单、导航和异步操作。

Lib Slint 专家

包含技能