如何使用 AI 重构 SwiftUI 视图以优化性能与代码结构

解决 SwiftUI 项目中常见的“巨型视图”问题：通过一套严谨的重构规范，让 AI 将复杂的 body 实现拆分为独立的小组件，并建立清晰的数据流，避免过度使用 ViewModel。

为什么需要这个技能

在 SwiftUI 开发中，开发者很容易陷入一个陷阱：为了方便，将所有 UI 逻辑写在一个巨大的 body 中，或者创建大量 private var header: some View 这样的计算属性。这会导致两个问题：一是代码难以维护，二是由于视图树不稳定，会导致不必要的界面刷新，影响性能。

本技能为 AI 提供了标准化的重构指南，使其能够将视图转换为“小而美”的独立类型，并推崇 MV（Model-View）模式而非盲目追求 MVVM，从而让 UI 代码像声明式文档一样易读。

适用场景

当一个 SwiftUI 视图文件超过 300 行，或 body 逻辑过于复杂时。
需要将长视图拆分为子视图，以提高代码复用率和预览（Preview）效率时。
想要优化 Observation 机制，减少不必要的视图刷新时。
需要统一团队的 SwiftUI 代码布局风格（如属性定义顺序）时。

核心工作流

规范属性顺序：按照 Environment $\to$ let $\to$ @State $\to$ init $\to$ body $\to$ 辅助函数 的顺序重新组织代码。
由 MVVM 转向 MV：优先使用 @State、@Environment 和 .task 处理逻辑。除非现有代码有明确要求，否则不建议仅为了镜像状态而引入 ViewModel。
提取独立视图类型：严禁使用大量计算属性（some View helpers）来构建屏幕。必须将复杂部分提取为独立的 struct View，并通过显式参数传递数据。
清理 Body 副作用：将按钮点击、异步调用等业务逻辑从 body 内部移至私有方法中，使 body 仅包含 UI 声明。
稳定视图树：避免在根层级使用 if/else 切换完全不同的视图分支，优先使用修饰符（如 .opacity 或 .overlay）来保持视图标识（Identity）的稳定。

// 推荐：使用独立子视图
var body: some View {
    List {
        HeaderSection(title: title, subtitle: subtitle)
        ResultsSection(items: filteredItems)
    }
}

private struct HeaderSection: View {
    let title: String
    let subtitle: String

    var body: some View {
        VStack(alignment: .leading) {
            Text(title).font(.title2)
            Text(subtitle).font(.subheadline)
        }
    }
}

下载和安装

下载 swiftui-view-refactor 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐

如何使用 AI 重构 SwiftUI 视图以优化性能与代码结构 #

为什么需要这个技能 #

适用场景 #

核心工作流 #