名称: swiftui-view-refactor
描述: 重构和审查 SwiftUI 视图文件,以确保结构一致、依赖注入正确以及合理使用 Observation。适用于需要清理 SwiftUI 视图布局/顺序、安全处理视图模型(尽可能使用非可选类型)或标准化依赖项与 @Observable 状态的初始化和传递方式的场景。
来源:复制自 @Dimillian 的 Dimillian/Skills (2025-12-31)。
为 SwiftUI 视图应用一致的结构和依赖模式,重点关注顺序、模型-视图 (MV) 模式、谨慎的视图模型处理以及正确的 Observation 使用。
private/public let@State / 其他存储属性var(非视图)initbody@State、@Environment、@Query 以及 task/onChange 进行状态协调。@Environment 注入服务和共享模型;保持视图小巧且可组合。body 内容超过一屏或包含多个逻辑部分,应将其拆分为更小的子视图。var header: some View { ... })承载状态或包含复杂分支逻辑时,应将其提取为独立的 View 类型。View 结构体。示例(提取一个部分):
var body: some View {
VStack(alignment: .leading, spacing: 16) {
HeaderSection(title: title, isPinned: isPinned)
DetailsSection(details: details)
ActionsSection(onSave: onSave, onCancel: onCancel)
}
}
示例(长 body → 短 body + 同一文件内的计算视图):
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)
}
}
}
init 将依赖项传递给视图,然后在视图的 init 中将它们传递给视图模型。bootstrapIfNeeded 模式。示例(基于 Observation):
@State private var viewModel: SomeViewModel
init(dependency: Dependency) {
_viewModel = State(initialValue: SomeViewModel(dependency: dependency))
}
@Observable 引用类型,将其作为 @State 存储在根视图中。1) 重新排序视图以符合顺序规则。
2) 优先采用 MV 模式:使用 @State、@Environment、@Query、task 和 onChange 将轻量级协调逻辑移至视图中。
3) 如果视图模型存在,用非可选的 @State 视图模型替换可选视图模型,并在 init 中通过视图传递的依赖项进行初始化。
4) 确认 Observation 使用:根 @Observable 视图模型使用 @State,避免冗余包装器。
5) 保持行为不变:除非请求,否则不更改布局或业务逻辑。
body 下方,非视图计算属性放在 init 上方。references/mv-patterns.md。