SwiftUI 视图重构

来源：复制自 @Dimillian 的Dimillian/Skills(2025-12-31).

概述

为 SwiftUI 视图应用一致的结构和依赖模式，重点关注顺序、模型-视图 (MV) 模式、谨慎的视图模型处理以及正确的 Observation 使用。

核心准则

1) 视图内部顺序（从上到下）

• 环境变量
• 私有属性/公开属性 let 常量
• @State 状态变量/ 其他存储属性
• 计算属性var 变量(非视图相关)
• 初始化器
• body 视图主体
• 计算视图构建器 / 其他视图辅助工具
• 辅助 / 异步函数

2) 优先采用 MV（模型-视图）模式

• 默认采用MV模式：视图是轻量级的状态表达式；模型/服务拥有业务逻辑。
• 优先使用@State、@Environment、@Query以及task/onChange进行编排。
• 通过@Environment注入服务和共享模型；保持视图小巧且可组合。
• 将大型视图拆分为子视图，而非引入视图模型。

3) 拆分大型主体和视图属性

• 如果主体超过一屏或包含多个逻辑部分，将其拆分为更小的子视图。
• 将大型计算视图属性（如var header: some View { ... }）提取到专门的视图当它们包含状态或复杂分支时。
• 将相关的子视图作为计算属性保留在同一文件中是可行的；仅在结构上合理或计划复用时，才提取为独立的视图结构体。
• 优先传递小型输入（数据、绑定、回调），而非复用整个父视图的状态。

示例（提取部分）：

var body: some View {
    VStack(alignment: .leading, spacing: 16) {
        HeaderSection(title: title, isPinned: isPinned)
        DetailsSection(details: details)
        ActionsSection(onSave: onSave, onCancel: onCancel)
    }
}

示例（长主体 → 短主体 + 同一文件中的计算视图）：

var body: some View {
    List {
        header
        filters
        results
        footer
    }
}

private var header: some View {
    VStack(alignment: .leading, spacing: 6) {
        Text(title).font(.title2)
        Text(subtitle).font(.subheadline)
    }
}

private var filters: some View {
    ScrollView(.horizontal, showsIndicators: false) {
        HStack {
            ForEach(filterOptions, id: \.self) { option in
                FilterChip(option: option, isSelected: option == selectedFilter)
                    .onTapGesture { selectedFilter = option }
            }
        }
    }
}

示例（提取复杂的计算视图）：

private var header: some View {
    HeaderSection(title: title, subtitle: subtitle, status: status)
}

private struct HeaderSection: View {
    let title: String
    let subtitle: String?
    let status: Status

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text(title).font(.headline)
            if let subtitle { Text(subtitle).font(.subheadline) }
            StatusBadge(status: status)
        }
    }
}

4) 视图模型处理（仅当已存在时）

• 除非请求或现有代码明确要求，否则不要引入视图模型。
• 如果存在视图模型，请尽可能使其非可选。
• 通过初始化将依赖项传递给视图，然后在视图的初始化中将其传递给视图模型。
• 避免bootstrapIfNeeded模式。

示例（基于观察）：

@State private var viewModel: SomeViewModel

init(dependency: Dependency) {
    _viewModel = State(initialValue: SomeViewModel(dependency: dependency))
}

5) 观察使用

• 对于@Observable引用类型，将它们作为@State存储在根视图中。
• 根据需要显式传递可观察对象；除非必要，避免使用可选状态。

工作流程

1. 重新排列视图以匹配排序规则。
2. 倾向于MV：将轻量级编排移入视图，使用@State、@Environment、@Query、task和onChange。
3. 如果存在视图模型，则用非可选的@State视图模型在初始化时通过传递视图的依赖项进行初始化。
4. 确认观察机制的使用：@State用于根视图，@Observable用于视图模型，无需多余的包装器。
5. 保持行为不变：除非有要求，否则不改变布局或业务逻辑。

注意事项

• 优先使用小而明确的辅助函数，而非大型条件块。
• 保持计算型视图构建器位于body下方，非视图的计算属性位于初始化上方。
• 有关MV优先模式的指导和原理，请参阅references/mv-patterns.md。