SuperAPI AI 工具集

guide-swiftui-ui-patterns

通用与其它

查看项目

更新于 10-16 03:48

技能介绍

用途:这是一份专家级工作流与模式指南,用于指导构建 SwiftUI 视图和组件,包括导航层级、自定义视图修饰符与响应式布局,而非 API 参考文档。原出处为 Dimillian/Skills(Thomas Ricouard),MIT 许可。

主要能力:

  1. 按目标选择轨道。已有项目:定位功能或界面及其主要交互模型(列表、详情、编辑器、设置、标签页),用 rg "TabView(" 等在仓库中寻找邻近示例,沿用本地约定(优先 SwiftUI 原生状态、状态尽量本地化、共享依赖用环境注入),再按 references/components-index.md 选择组件参考。若交互通过拖动或滚动主内容揭示次要内容,先读 references/scroll-reveal.md 再手动实现手势。
  2. 新项目脚手架:从 references/app-wiring.md 开始接线 TabView + NavigationStack + sheets,基于骨架添加最小 AppTab 和 RouterPath,按所需 UI 选择组件参考,随新界面扩展路由与 sheet 枚举。

通用规则:使用现代 SwiftUI 状态(@State、@Binding、@Observable、@Environment),避免不必要的 view model;若部署目标含 iOS 16 或更早、无法用 iOS 17 引入的 Observation API,则回退到 ObservableObject(根持有用 @StateObject,注入观察用 @ObservedObject,@EnvironmentObject 仅用于真正共享的应用级状态)。优先组合,保持视图小而专注;用 async/await 配合 .task 与显式加载/错误状态,重启、取消与防抖参见 references/async-state.md。共享应用服务放 @Environment,功能本地依赖优先用初始化器显式注入。优先选择适配部署目标的最新 SwiftUI API,并在模式依赖最低 OS 时注明;仅在编辑遗留文件时维持旧模式;遵循项目格式化与风格指南。Sheets 方面:当状态表示选中的模型时优先用 .sheet(item:);避免在 sheet body 内使用 if let;sheet 应自持动作并在内部调用 dismiss(),而非转发 onCancel/onConfirm。滚动驱动揭示方面:优先从滚动偏移推导归一化进度值,用单一数据源驱动视觉状态;除非仅靠滚动无法表达交互,否则避免并行手势状态机。

状态归属总结:单一视图拥有的本地 UI 状态用 @State;子视图修改父拥有的值状态用 @Binding;iOS 17+ 根拥有的引用模型用 @State 搭配 @Observable 类型;iOS 17+ 子视图读写注入的 @Observable 模型时显式作为存储属性传入;共享应用服务或配置用 @Environment(Type.self);iOS 16 及更早的遗留引用模型在根用 @StateObject,注入时用 @ObservedObject。先确定归属位置,再选包装器,值状态足够时不要引入引用模型。

横切参考:references/navigationstack.md(导航归属、每标签历史、枚举路由)、references/sheets.md(集中式模态呈现与枚举驱动 sheet)、references/deeplinks.md(URL 处理与外部链接路由)、references/app-wiring.md(根依赖图、环境用法、应用外壳接线)、references/async-state.md(.task、.task(id:)、取消、防抖与异步 UI 状态)、references/previews.md(#Preview、fixture、模拟环境与隔离预览)、references/performance.md(稳定标识、观察范围、惰性容器与渲染成本护栏)。

反模式:单文件混合布局、业务逻辑、网络、路由与格式化的巨型视图;用多个布尔标志处理互斥的 sheet、alert 或导航目标;在 body 驱动的代码路径中直接调用实时服务而非视图生命周期钩子或注入的模型/服务;用 AnyView 绕过本应通过更好组合解决的 typemismatch;在无明确归属理由时把所有共享依赖默认设为 @EnvironmentObject 或全局 router。

新 SwiftUI 视图的工作流:写 UI 代码前定义视图状态、归属位置与最低 OS 假设;区分哪些依赖放 @Environment、哪些作为显式初始化器输入;勾画视图层级、路由模型与呈现点,重复部分抽成子视图(复杂导航读对应参考),先构建验证无编译错误;用 .task 或 .task(id:) 实现异步加载并加显式加载与错误状态;为主要与次要状态添加预览,交互 UI 加无障碍标签或标识;构建验证无编译错误、预览不崩溃、状态变更正确传播,并检查列表标识与观察范围不会导致可避免的重渲染(大屏、重滚动或高频更新读 references/performance.md)。常见编译错误(缺 @State 注解、ViewBuilder 闭包歧义、泛型类型不匹配)须在更新调用点前解决;构建失败时先读错误信息修复再重建;预览崩溃时隔离问题子视图、确认状态初始化有效后重跑。

组件参考:以 references/components-index.md 为入口,每个组件参考包含意图与最佳适用场景、符合本地约定的最小用法、陷阱与性能说明、当前仓库示例路径。新增组件参考时创建 references/<component>.md,保持简短可操作并链接仓库具体文件,同时更新 components-index.md。

限制:本技能为指导性文档,不含 API 参考;部分依赖最低 OS 版本的模式需按部署目标取舍;资料未提供价格、平台支持范围等具体信息。