SuperAPI AI 工具集

avalonia-layout-zafiro

前端与建站

查看项目

更新于 10-15 18:07

技能介绍

用途

该技能面向使用 Avalonia UI 框架进行界面开发的场景,重点在于借助 Zafiro.Avalonia 实现现代、整洁且易于维护的布局。其核心目标是减少 XAML 中的重复代码,通过语义化容器、共享样式和通用组件来组织视图结构。

主要能力

技能内容按主题组织为若干文件,用户应根据当前布局问题选择性阅读:

  • themes.md:主题组织与共享样式,适用于设置或优化应用主题。
  • containers.md:语义化容器(HeaderedContainer、EdgePanel、Card),适用于构建视图与布局结构。
  • icons.md:使用 IconExtension 与 IconOptions 的图标用法,适用于添加和自定义图标。
  • behaviors.md:Xaml.Interaction.Behaviors 以及避免使用转换器,适用于实现复杂交互。
  • components.md:通用组件与避免嵌套,适用于创建可复用 UI 元素。

技能还提供了一份整洁布局检查清单,包括:是否使用语义化容器(如用 HeaderedContainer 替代手动添加标题的 Border);是否避免冗余属性并改用 axaml 文件中的共享样式;是否通过 EdgePanel 或通用组件减少嵌套;是否通过 {Icon fa-name} 和 IconOptions 使用图标扩展;是否使用 Interaction.Behaviors 处理 UI 逻辑而非代码后置;是否避免不必要的转换器,优先使用 ViewModel 属性或行为。

使用方式

技能强调“选择性阅读规则”:只阅读与当前布局挑战相关的文件。用户可参照检查清单逐项核对布局实现,并对照反模式进行修正。反模式包括:在视图中使用硬编码颜色或尺寸字面量;创建深层嵌套的 Grid 和 StackPanel;在多个元素间重复视觉属性(应使用 Styles);对属于 ViewModel 的简单逻辑使用 IValueConverter。推荐做法包括:使用 DynamicResource 引用颜色和画刷;将重复布局提取为通用组件;利用 EdgePanel 等 Zafiro.Avalonia 特有面板处理常见 UI 模式。

适用场景

该技能适用于需要执行上述工作流或操作的任务,例如整理应用主题、重构视图布局、统一图标样式、以行为替代转换器、抽取可复用组件等。

限制

仅当任务明确匹配上述范围时才应使用该技能。其输出不应被视为环境特定验证、测试或专家评审的替代品。若缺少必要输入、权限、安全边界或成功标准,应停止并请求澄清。

相关项目

资料中提及一个示例实现:Angor 项目,路径为 /mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln。