尧图网页设计 
SwiftUI 模式深度指南从状态管理到自定义布局的完整实战手册claude-skills Swift Expert 技能解析【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills本文以 claude-skills 开源仓库中 Swift Expert 技能的 SwiftUI Patterns 参考文档 为骨架系统拆解 SwiftUI 开发的七大核心模式状态管理、视图组合、环境值、Preference Keys、动画、异步集成与自定义布局。无论你正在使用 Claude Code 配合 Swift Expert 技能构建 iOS/macOS 应用还是想独立掌握这些官方推荐的 SwiftUI 写法读完本文你将能够正确选择状态容器、封装可复用视图修饰器、构建自定义 Layout 布局并写出与 Apple 设计理念一致的声明式 UI 代码。文档定位Swift Expert 技能如何加载这份参考在 claude-skills 仓库中Swift Expert 是一个面向 Swift 5.9、SwiftUI 与 async/await 并发编程的领域专家技能其元信息位于 skills/swift-expert/SKILL.md。技能采用主文件 按需加载参考的机制主题参考文件加载时机SwiftUIreferences/swiftui-patterns.md构建视图、状态管理、修饰器并发references/async-concurrency.mdasync/await、actor、结构化并发协议references/protocol-oriented.md协议设计、泛型、类型擦除内存references/memory-performance.mdARC、weak/unowned、性能优化测试references/testing-patterns.mdXCTest、异步测试、mock 策略也就是说当 Agent 收到SwiftUI reactive patterns这类请求时SKILLS_GUIDE.md 中明确将这类任务映射到 Swift Expert会先激活技能再根据上下文加载 swiftui-patterns.md。仓库的 校验脚本 中的ReferencePathChecker还会校验技能文档中引用的参考路径都能正确解析确保这份参考在实际使用中可被 Agent 可靠加载。下面进入本文核心完整解读这份参考文档中的每一个模式。状态管理按场景选择正确的状态容器SwiftUI 的状态管理建立在若干属性包装器之上选择的关键是生命周期归属与值类型/引用类型。State视图局部状态State只适合视图自身拥有的简单值类型状态其生命周期与视图绑定值变化会自动触发视图重绘import SwiftUI // State for local view state struct CounterView: View { State private var count 0 var body: some View { VStack { Text(Count: \(count)) Button(Increment) { count 1 } } } }Binding双向数据流当子视图需要读写父视图持有的状态时用$前缀把State的投影包装成Binding传入// Binding for two-way data flow struct ToggleView: View { Binding var isOn: Bool var body: some View { Toggle(Enable Feature, isOn: $isOn) } }StateObject 与 ObservedObject引用类型的状态可观察对象ObservableObjectPublished适用于跨视图共享的逻辑模型。规则是由视图创建的用StateObject由外部传入的用ObservedObject// StateObject for observable objects (view owns it) class ViewModel: ObservableObject { Published var items: [String] [] Published var isLoading false } struct ContentView: View { StateObject private var viewModel ViewModel() var body: some View { List(viewModel.items, id: \.self) { item in Text(item) } } } // ObservedObject for passed-in observable objects struct DetailView: View { ObservedObject var viewModel: ViewModel }StateObject保证可观察对象在视图生命周期内只创建一次不会因父视图重绘而被重建——这是它与ObservedObject最本质的差异。EnvironmentObject隐式依赖注入对 App 级别的共享状态使用EnvironmentObject从环境注入避免逐层传递// EnvironmentObject for dependency injection struct AppView: View { EnvironmentObject var appState: AppState }与 SKILL.md 的衔接Swift 5.9 的 Observable 新范式值得留意的是SKILL.md 在 SwiftUI 状态管理一节给出了与时俱进的建议Swift 5.9 引入了Observable宏可以替代ObservableObject/Published的样板代码// ✅ DO: use Observable (Swift 5.9) for view models Observable final class CounterViewModel { var count 0 func increment() { count 1 } } struct CounterView: View { State private var vm CounterViewModel() var body: some View { VStack { Text(\(vm.count)) Button(Increment, action: vm.increment) } } } // ❌ DONT: reach for ObservableObject/Published when Observable suffices class LegacyViewModel: ObservableObject { Published var count 0 // Unnecessary boilerplate in Swift 5.9 }在实际项目中新代码应优先采用Observable本文参考中的StateObject/ObservedObject模式则用于既有代码库或需要兼容旧版本 iOS 的场景。现代视图组合ViewBuilder 与 ViewModifierSwiftUI 的声明式组合能力来自两个基础构件构建结果的ViewBuilder和封装样式与行为的ViewModifier。ViewBuilder自定义容器视图ViewBuilder允许在闭包中以 SwiftUI 原生语法书写分支逻辑构建出可复用的容器组件// View builder for custom containers struct ConditionalViewContent: View: View { let condition: Bool ViewBuilder let content: () - Content var body: some View { if condition { content() } else { EmptyView() } } }ViewModifier抽取可复用的视图修饰当一组.padding().background().cornerRadius().shadow()链式修饰在多个界面重复出现时应抽取为ViewModifier并提供一个易读的扩展方法// Custom ViewModifier struct CardModifier: ViewModifier { func body(content: Content) - some View { content .padding() .background(Color.white) .cornerRadius(12) .shadow(radius: 4) } } extension View { func cardStyle() - some View { modifier(CardModifier()) } } // Usage Text(Hello) .cardStyle()这种模式让 UI 样式具备单一事实来源与协议导向编程中用协议扩展提供默认实现的思想一脉相承详见 protocol-oriented.md。环境值向视图树深层注入配置系统内置环境值如.colorScheme只能覆盖有限场景。通过自定义EnvironmentKey可以把自己的配置对象注入整棵视图树// Custom environment key private struct ThemeKey: EnvironmentKey { static let defaultValue: Theme .light } extension EnvironmentValues { var theme: Theme { get { self[ThemeKey.self] } set { self[ThemeKey.self] newValue } } } extension View { func theme(_ theme: Theme) - some View { environment(\.theme, theme) } } // Usage struct ThemedView: View { Environment(\.theme) var theme var body: some View { Text(Themed) .foregroundColor(theme.textColor) } }三个组成部分缺一不可EnvironmentKey定义默认值、EnvironmentValues扩展暴露读写接口、View.environment(_:_:)扩展提供链式注入语法。参考文档同时强调Prefer Environment over prop drilling——即优先使用环境值而非逐层手动传参。Preference Keys子视图向父视图上报数据与父传子的环境值相反PreferenceKey解决子传父子视图通过.preference(key:value:)上报数据父视图用.onPreferenceChange接收。经典应用场景是测量子视图尺寸// Collecting data from child views struct SizePreferenceKey: PreferenceKey { static var defaultValue: CGSize .zero static func reduce(value: inout CGSize, nextValue: () - CGSize) { value nextValue() } } struct MeasurableView: View { State private var size: CGSize .zero var body: some View { Text(Measure me) .background( GeometryReader { geometry in Color.clear .preference(key: SizePreferenceKey.self, value: geometry.size) } ) .onPreferenceChange(SizePreferenceKey.self) { newSize in size newSize } } }reduce(value:nextValue:)负责合并多个子视图上报的值——当视图树中有多个子视图上报 preference 时SwiftUI 会按自底向上的顺序调用它。动画隐式、显式与自定义转场SwiftUI 提供三个层次的动画能力。隐式动画.animation(_:value:)声明式地告诉系统当value变化时以指定动画过渡注意 iOS 17 必须绑定value参数// Implicit animations struct AnimatedView: View { State private var scale: CGFloat 1.0 var body: some View { Circle() .scaleEffect(scale) .animation(.spring(response: 0.5, dampingFraction: 0.6), value: scale) .onTapGesture { scale scale 1.0 ? 1.5 : 1.0 } } }显式动画withAnimation当状态变化发生在普通方法中、需要精确控制动画作用范围时使用// Explicit animations struct ExplicitAnimationView: View { State private var offset: CGFloat 0 var body: some View { Text(Slide) .offset(x: offset) .onTapGesture { withAnimation(.easeInOut(duration: 0.3)) { offset offset 0 ? 100 : 0 } } } }自定义转场AnyTransitionAnyTransition可以被组合成自己的转场效果用于视图出现/消失的切换// Custom transitions extension AnyTransition { static var slideAndFade: AnyTransition { AnyTransition.slide.combined(with: .opacity) } }Async/Await 集成.task、.refreshable与结构化并发SwiftUI 与 Swift 并发模型原生集成。.task修饰器在视图出现时启动异步任务并在视图消失时自动取消.refreshable提供下拉刷新入口struct AsyncDataView: View { State private var data: [Item] [] State private var isLoading false var body: some View { List(data) { item in Text(item.title) } .task { await loadData() } .refreshable { await loadData() } } private func loadData() async { isLoading true defer { isLoading false } do { data try await API.fetchItems() } catch { print(Error: \(error)) } } }这段代码演示了三个并发最佳实践defer确保 loading 状态必然复位do/catch捕获所有错误路径.task与视图生命周期绑定避免悬挂任务。更深层的并发模式withTaskGroup并行抓取、async let并行加载、actor 隔离与MainActor保证 UI 更新在主线程可参考配套的 async-concurrency.md。参考文档中与MainActor一致的表述Property updates happen on main thread automatically印证了 SwiftUI 视图更新必须发生在主线程这一硬约束。自定义布局实现 Layout 协议iOS 16Layout协议让开发者完全控制子视图的测量与摆放是实现瀑布流、环状菜单等非标准布局的正统途径。下面的WaterfallLayout是参考文档给出的完整瀑布流实现struct WaterfallLayout: Layout { var columns: Int 2 var spacing: CGFloat 8 func sizeThatFits( proposal: ProposedViewSize, subviews: Subviews, cache: inout () ) - CGSize { // Calculate total size needed let columnWidth (proposal.width! - spacing * CGFloat(columns - 1)) / CGFloat(columns) var columnHeights Array(repeating: CGFloat(0), count: columns) for subview in subviews { let column columnHeights.enumerated().min(by: { $0.element $1.element })!.offset let size subview.sizeThatFits(.init(width: columnWidth, height: nil)) columnHeights[column] size.height spacing } return CGSize( width: proposal.width!, height: columnHeights.max()! - spacing ) } func placeSubviews( in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout () ) { let columnWidth (bounds.width - spacing * CGFloat(columns - 1)) / CGFloat(columns) var columnHeights Array(repeating: CGFloat(0), count: columns) for subview in subviews { let column columnHeights.enumerated().min(by: { $0.element $1.element })!.offset let x bounds.minX CGFloat(column) * (columnWidth spacing) let y bounds.minY columnHeights[column] subview.place( at: CGPoint(x: x, y: y), proposal: .init(width: columnWidth, height: nil) ) columnHeights[column] subview.dimensions(in: .init(width: columnWidth, height: nil)).height spacing } } }实现要点可拆解为两步sizeThatFits根据建议尺寸把可用宽度均分为 N 列遍历每个子视图用贪心策略将其放入当前最矮的列返回整体所需高度placeSubviews按同样的贪心计算结果把每个子视图摆放到bounds内的具体坐标并用subview.dimensions更新列高。两个方法共享相同的列宽计算与最矮列选择逻辑确保测量与实际摆放结果一致。使用时只需WaterfallLayout(columns: 3) { ... }即可作为自定义容器直接嵌入视图树。性能调优状态选择决定渲染成本参考文档的末尾用八条清单总结了 SwiftUI 性能的核心原则这里逐条给出实现层面的解读UseStatefor simple value types值类型状态变更只触发该视图及其依赖区域的重新计算UseStateObjectfor reference types you create保证可观察对象生命周期与视图一致避免反复重建UseObservedObjectfor reference types passed in由外部持有生命周期视图只订阅更新PreferEnvironmentover prop drilling环境值按需注入减少不必要的视图层级依赖Useequatable()modifier for expensive views当视图内容由可比较数据驱动时equatable()可在数据未变化时跳过 body 求值Leverageid()modifier to control view identity通过显式指定身份值控制视图的复用与重建例如列表项的重建策略Usetask(id:)to cancel and restart async work当id变化时自动取消旧任务并启动新任务例如搜索框输入防抖场景Avoid computing expensive values in body - useStateor computed propertiesbody 每次刷新都会执行昂贵的计算应缓存到State、lazy属性或预计算值中。以上清单与 memory-performance.md 中的优化思想完全一致——例如Profile before optimizing (use Instruments)、Reserve collection capacity when size is known等都指向先测量、后优化与避免在热路径上重复分配的原则。总结一份可直接复用的 SwiftUI 决策手册本文围绕 swiftui-patterns.md 完整解读了 SwiftUI 开发中最常用的七类模式五类状态容器的选择规则、ViewBuilder/ViewModifier的组合艺术、环境值注入、Preference 上报、三层动画体系、.task异步集成以及Layout协议的自定义布局实现。配合 SKILL.md 中的代码规范用async/await处理异步、默认使用值类型、用属性包装器处理横切关注点、文档化 API、用 Instruments 分析后再优化以及同目录下的 async-concurrency.md、protocol-oriented.md、memory-performance.md、testing-patterns.md你可以在 Claude Code 中把它作为构建 SwiftUI 界面的即用型决策手册也可以直接照抄其中的代码模式到自己的 Xcode 工程中——所有代码均基于 SwiftUI 标准 API可直接编译运行。【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SwiftUI 模式深度指南：从状态管理到自定义布局的完整实战手册（claude-skills Swift Expert 技能解析）
SwiftUI 模式深度指南从状态管理到自定义布局的完整实战手册claude-skills Swift Expert 技能解析【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills本文以 claude-skills 开源仓库中 Swift Expert 技能的 SwiftUI Patterns 参考文档 为骨架系统拆解 SwiftUI 开发的七大核心模式状态管理、视图组合、环境值、Preference Keys、动画、异步集成与自定义布局。无论你正在使用 Claude Code 配合 Swift Expert 技能构建 iOS/macOS 应用还是想独立掌握这些官方推荐的 SwiftUI 写法读完本文你将能够正确选择状态容器、封装可复用视图修饰器、构建自定义 Layout 布局并写出与 Apple 设计理念一致的声明式 UI 代码。文档定位Swift Expert 技能如何加载这份参考在 claude-skills 仓库中Swift Expert 是一个面向 Swift 5.9、SwiftUI 与 async/await 并发编程的领域专家技能其元信息位于 skills/swift-expert/SKILL.md。技能采用主文件 按需加载参考的机制主题参考文件加载时机SwiftUIreferences/swiftui-patterns.md构建视图、状态管理、修饰器并发references/async-concurrency.mdasync/await、actor、结构化并发协议references/protocol-oriented.md协议设计、泛型、类型擦除内存references/memory-performance.mdARC、weak/unowned、性能优化测试references/testing-patterns.mdXCTest、异步测试、mock 策略也就是说当 Agent 收到SwiftUI reactive patterns这类请求时SKILLS_GUIDE.md 中明确将这类任务映射到 Swift Expert会先激活技能再根据上下文加载 swiftui-patterns.md。仓库的 校验脚本 中的ReferencePathChecker还会校验技能文档中引用的参考路径都能正确解析确保这份参考在实际使用中可被 Agent 可靠加载。下面进入本文核心完整解读这份参考文档中的每一个模式。状态管理按场景选择正确的状态容器SwiftUI 的状态管理建立在若干属性包装器之上选择的关键是生命周期归属与值类型/引用类型。State视图局部状态State只适合视图自身拥有的简单值类型状态其生命周期与视图绑定值变化会自动触发视图重绘import SwiftUI // State for local view state struct CounterView: View { State private var count 0 var body: some View { VStack { Text(Count: \(count)) Button(Increment) { count 1 } } } }Binding双向数据流当子视图需要读写父视图持有的状态时用$前缀把State的投影包装成Binding传入// Binding for two-way data flow struct ToggleView: View { Binding var isOn: Bool var body: some View { Toggle(Enable Feature, isOn: $isOn) } }StateObject 与 ObservedObject引用类型的状态可观察对象ObservableObjectPublished适用于跨视图共享的逻辑模型。规则是由视图创建的用StateObject由外部传入的用ObservedObject// StateObject for observable objects (view owns it) class ViewModel: ObservableObject { Published var items: [String] [] Published var isLoading false } struct ContentView: View { StateObject private var viewModel ViewModel() var body: some View { List(viewModel.items, id: \.self) { item in Text(item) } } } // ObservedObject for passed-in observable objects struct DetailView: View { ObservedObject var viewModel: ViewModel }StateObject保证可观察对象在视图生命周期内只创建一次不会因父视图重绘而被重建——这是它与ObservedObject最本质的差异。EnvironmentObject隐式依赖注入对 App 级别的共享状态使用EnvironmentObject从环境注入避免逐层传递// EnvironmentObject for dependency injection struct AppView: View { EnvironmentObject var appState: AppState }与 SKILL.md 的衔接Swift 5.9 的 Observable 新范式值得留意的是SKILL.md 在 SwiftUI 状态管理一节给出了与时俱进的建议Swift 5.9 引入了Observable宏可以替代ObservableObject/Published的样板代码// ✅ DO: use Observable (Swift 5.9) for view models Observable final class CounterViewModel { var count 0 func increment() { count 1 } } struct CounterView: View { State private var vm CounterViewModel() var body: some View { VStack { Text(\(vm.count)) Button(Increment, action: vm.increment) } } } // ❌ DONT: reach for ObservableObject/Published when Observable suffices class LegacyViewModel: ObservableObject { Published var count 0 // Unnecessary boilerplate in Swift 5.9 }在实际项目中新代码应优先采用Observable本文参考中的StateObject/ObservedObject模式则用于既有代码库或需要兼容旧版本 iOS 的场景。现代视图组合ViewBuilder 与 ViewModifierSwiftUI 的声明式组合能力来自两个基础构件构建结果的ViewBuilder和封装样式与行为的ViewModifier。ViewBuilder自定义容器视图ViewBuilder允许在闭包中以 SwiftUI 原生语法书写分支逻辑构建出可复用的容器组件// View builder for custom containers struct ConditionalViewContent: View: View { let condition: Bool ViewBuilder let content: () - Content var body: some View { if condition { content() } else { EmptyView() } } }ViewModifier抽取可复用的视图修饰当一组.padding().background().cornerRadius().shadow()链式修饰在多个界面重复出现时应抽取为ViewModifier并提供一个易读的扩展方法// Custom ViewModifier struct CardModifier: ViewModifier { func body(content: Content) - some View { content .padding() .background(Color.white) .cornerRadius(12) .shadow(radius: 4) } } extension View { func cardStyle() - some View { modifier(CardModifier()) } } // Usage Text(Hello) .cardStyle()这种模式让 UI 样式具备单一事实来源与协议导向编程中用协议扩展提供默认实现的思想一脉相承详见 protocol-oriented.md。环境值向视图树深层注入配置系统内置环境值如.colorScheme只能覆盖有限场景。通过自定义EnvironmentKey可以把自己的配置对象注入整棵视图树// Custom environment key private struct ThemeKey: EnvironmentKey { static let defaultValue: Theme .light } extension EnvironmentValues { var theme: Theme { get { self[ThemeKey.self] } set { self[ThemeKey.self] newValue } } } extension View { func theme(_ theme: Theme) - some View { environment(\.theme, theme) } } // Usage struct ThemedView: View { Environment(\.theme) var theme var body: some View { Text(Themed) .foregroundColor(theme.textColor) } }三个组成部分缺一不可EnvironmentKey定义默认值、EnvironmentValues扩展暴露读写接口、View.environment(_:_:)扩展提供链式注入语法。参考文档同时强调Prefer Environment over prop drilling——即优先使用环境值而非逐层手动传参。Preference Keys子视图向父视图上报数据与父传子的环境值相反PreferenceKey解决子传父子视图通过.preference(key:value:)上报数据父视图用.onPreferenceChange接收。经典应用场景是测量子视图尺寸// Collecting data from child views struct SizePreferenceKey: PreferenceKey { static var defaultValue: CGSize .zero static func reduce(value: inout CGSize, nextValue: () - CGSize) { value nextValue() } } struct MeasurableView: View { State private var size: CGSize .zero var body: some View { Text(Measure me) .background( GeometryReader { geometry in Color.clear .preference(key: SizePreferenceKey.self, value: geometry.size) } ) .onPreferenceChange(SizePreferenceKey.self) { newSize in size newSize } } }reduce(value:nextValue:)负责合并多个子视图上报的值——当视图树中有多个子视图上报 preference 时SwiftUI 会按自底向上的顺序调用它。动画隐式、显式与自定义转场SwiftUI 提供三个层次的动画能力。隐式动画.animation(_:value:)声明式地告诉系统当value变化时以指定动画过渡注意 iOS 17 必须绑定value参数// Implicit animations struct AnimatedView: View { State private var scale: CGFloat 1.0 var body: some View { Circle() .scaleEffect(scale) .animation(.spring(response: 0.5, dampingFraction: 0.6), value: scale) .onTapGesture { scale scale 1.0 ? 1.5 : 1.0 } } }显式动画withAnimation当状态变化发生在普通方法中、需要精确控制动画作用范围时使用// Explicit animations struct ExplicitAnimationView: View { State private var offset: CGFloat 0 var body: some View { Text(Slide) .offset(x: offset) .onTapGesture { withAnimation(.easeInOut(duration: 0.3)) { offset offset 0 ? 100 : 0 } } } }自定义转场AnyTransitionAnyTransition可以被组合成自己的转场效果用于视图出现/消失的切换// Custom transitions extension AnyTransition { static var slideAndFade: AnyTransition { AnyTransition.slide.combined(with: .opacity) } }Async/Await 集成.task、.refreshable与结构化并发SwiftUI 与 Swift 并发模型原生集成。.task修饰器在视图出现时启动异步任务并在视图消失时自动取消.refreshable提供下拉刷新入口struct AsyncDataView: View { State private var data: [Item] [] State private var isLoading false var body: some View { List(data) { item in Text(item.title) } .task { await loadData() } .refreshable { await loadData() } } private func loadData() async { isLoading true defer { isLoading false } do { data try await API.fetchItems() } catch { print(Error: \(error)) } } }这段代码演示了三个并发最佳实践defer确保 loading 状态必然复位do/catch捕获所有错误路径.task与视图生命周期绑定避免悬挂任务。更深层的并发模式withTaskGroup并行抓取、async let并行加载、actor 隔离与MainActor保证 UI 更新在主线程可参考配套的 async-concurrency.md。参考文档中与MainActor一致的表述Property updates happen on main thread automatically印证了 SwiftUI 视图更新必须发生在主线程这一硬约束。自定义布局实现 Layout 协议iOS 16Layout协议让开发者完全控制子视图的测量与摆放是实现瀑布流、环状菜单等非标准布局的正统途径。下面的WaterfallLayout是参考文档给出的完整瀑布流实现struct WaterfallLayout: Layout { var columns: Int 2 var spacing: CGFloat 8 func sizeThatFits( proposal: ProposedViewSize, subviews: Subviews, cache: inout () ) - CGSize { // Calculate total size needed let columnWidth (proposal.width! - spacing * CGFloat(columns - 1)) / CGFloat(columns) var columnHeights Array(repeating: CGFloat(0), count: columns) for subview in subviews { let column columnHeights.enumerated().min(by: { $0.element $1.element })!.offset let size subview.sizeThatFits(.init(width: columnWidth, height: nil)) columnHeights[column] size.height spacing } return CGSize( width: proposal.width!, height: columnHeights.max()! - spacing ) } func placeSubviews( in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout () ) { let columnWidth (bounds.width - spacing * CGFloat(columns - 1)) / CGFloat(columns) var columnHeights Array(repeating: CGFloat(0), count: columns) for subview in subviews { let column columnHeights.enumerated().min(by: { $0.element $1.element })!.offset let x bounds.minX CGFloat(column) * (columnWidth spacing) let y bounds.minY columnHeights[column] subview.place( at: CGPoint(x: x, y: y), proposal: .init(width: columnWidth, height: nil) ) columnHeights[column] subview.dimensions(in: .init(width: columnWidth, height: nil)).height spacing } } }实现要点可拆解为两步sizeThatFits根据建议尺寸把可用宽度均分为 N 列遍历每个子视图用贪心策略将其放入当前最矮的列返回整体所需高度placeSubviews按同样的贪心计算结果把每个子视图摆放到bounds内的具体坐标并用subview.dimensions更新列高。两个方法共享相同的列宽计算与最矮列选择逻辑确保测量与实际摆放结果一致。使用时只需WaterfallLayout(columns: 3) { ... }即可作为自定义容器直接嵌入视图树。性能调优状态选择决定渲染成本参考文档的末尾用八条清单总结了 SwiftUI 性能的核心原则这里逐条给出实现层面的解读UseStatefor simple value types值类型状态变更只触发该视图及其依赖区域的重新计算UseStateObjectfor reference types you create保证可观察对象生命周期与视图一致避免反复重建UseObservedObjectfor reference types passed in由外部持有生命周期视图只订阅更新PreferEnvironmentover prop drilling环境值按需注入减少不必要的视图层级依赖Useequatable()modifier for expensive views当视图内容由可比较数据驱动时equatable()可在数据未变化时跳过 body 求值Leverageid()modifier to control view identity通过显式指定身份值控制视图的复用与重建例如列表项的重建策略Usetask(id:)to cancel and restart async work当id变化时自动取消旧任务并启动新任务例如搜索框输入防抖场景Avoid computing expensive values in body - useStateor computed propertiesbody 每次刷新都会执行昂贵的计算应缓存到State、lazy属性或预计算值中。以上清单与 memory-performance.md 中的优化思想完全一致——例如Profile before optimizing (use Instruments)、Reserve collection capacity when size is known等都指向先测量、后优化与避免在热路径上重复分配的原则。总结一份可直接复用的 SwiftUI 决策手册本文围绕 swiftui-patterns.md 完整解读了 SwiftUI 开发中最常用的七类模式五类状态容器的选择规则、ViewBuilder/ViewModifier的组合艺术、环境值注入、Preference 上报、三层动画体系、.task异步集成以及Layout协议的自定义布局实现。配合 SKILL.md 中的代码规范用async/await处理异步、默认使用值类型、用属性包装器处理横切关注点、文档化 API、用 Instruments 分析后再优化以及同目录下的 async-concurrency.md、protocol-oriented.md、memory-performance.md、testing-patterns.md你可以在 Claude Code 中把它作为构建 SwiftUI 界面的即用型决策手册也可以直接照抄其中的代码模式到自己的 Xcode 工程中——所有代码均基于 SwiftUI 标准 API可直接编译运行。【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考