view-refactor

SwiftUI 视图重构

概述

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

视图排序（从上到下）

1. 环境属性
2. private/public let 常量
3. @State / 其他存储属性
4. 计算属性 var（非视图）
5. init
6. body
7. 计算视图构建器 / 视图辅助项
8. 辅助函数 / 异步函数

核心指南

1) 优先采用 MV（Model-View）模式

• 默认采用 MV：视图是轻量的状态表达式；模型/服务负责业务逻辑
• 优先使用 @State、@Environment、@Query、task 和 onChange 进行编排
• 通过 @Environment 注入服务和共享模型
• 将大型视图拆分为较小的视图，而不是引入视图模型

2) 拆分较大的主体

如果 body 超出一个屏幕的长度，或包含多个逻辑区块，请将其拆分：

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 }
            }
        }
    }
}

3) 视图模型处理（仅限已存在的情况）

• 除非请求或现有代码明确需要，否则不要引入视图模型
• 如果已有视图模型，尽可能将其设为非可选
• 通过 init 向视图传递依赖项，再将其传入视图模型

@State private var viewModel: SomeViewModel

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

4) Observation 的使用

• 对于 @Observable 引用类型，在根视图中将其存储为 @State
• 根据需要将可观察对象显式传递到下层
• 除非有必要，否则避免使用可选状态

重构工作流

1. 按照排序规则重新排列视图
2. 优先采用 MV：使用 @State、@Environment、task、onChange 将编排逻辑移入视图
3. 如果存在视图模型，将可选类型替换为非可选类型，并在 init 中初始化 @State
4. 确认 Observation 的使用：根视图中的 @Observable 使用 @State，不添加冗余包装器
5. 保持行为不变：除非有明确要求，否则不要更改布局或业务逻辑

大型视图处理

当 SwiftUI 视图文件超过约 300 行时：

1. 使用扩展对相关辅助项进行分组
2. 将异步函数移入专用的 private 扩展
3. 使用 // MARK: - 注释（例如，// MARK: - Actions、// MARK: - Subviews）
4. 让主 struct 专注于存储属性、init 和 body

struct LargeView: View {
    @Environment(Store.self) private var store
    @State private var items: [Item] = []

    var body: some View {
        List {
            content
        }
        .task { await loadItems() }
    }
}

// MARK: - Subviews
private extension LargeView {
    var content: some View {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
}

// MARK: - Actions
private extension LargeView {
    func loadItems() async {
        items = await store.fetchItems()
    }
}

检查清单

• 属性排序正确（Environment → let → @State → 计算属性 → init → body）
• 大型主体已拆分为子视图或计算视图属性
• 未引入不必要的 ViewModel
• 在可能的情况下，现有 ViewModel 均为非可选
• 根视图将 @Observable 类型存储为 @State
• 通过 @Environment 注入依赖项
• 文件超过 300 行时，使用 MARK 注释整理结构
• 除非有明确要求，否则行为保持不变