Swiftui Patterns

作者 affaan-mef648e01899ba3e8dc6371642deaaf64b4477775無授權條款275K 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫4 天前更新

SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices. Use when building or reviewing SwiftUI views, @Observable state, navigation, or render performance.

僅含說明Software Development

AI 產生的概覽

關於現代 SwiftUI 架構、@Observable 狀態、導覽與算繪效能的指引。

功能: 此技能為在 Apple 平台上建構 SwiftUI 介面提供參考指引。內容涵蓋屬性包裝器的選擇、@Observable 檢視模型、環境注入、檢視組合、型別安全的 NavigationStack 路由、惰性容器與穩定識別碼等效能技巧、預覽，以及應避免的反模式。它產出的是說明性模式與程式碼範例，而非可直接執行的成品。
適用情境: 適用於建構或審查 SwiftUI 檢視、管理 @Observable 狀態、設計導覽流程，或最佳化清單與複雜版面的算繪效能。也適合在 SwiftUI 應用程式中組織檢視模型、資料流與相依性注入。
執行需求: 不需要指令碼或工具，僅為說明與程式碼範例。套用這些模式需要 Apple 平台的 SwiftUI 專案以及對 Swift 的了解。

SwiftUI Patterns

Modern SwiftUI patterns for building declarative, performant user interfaces on Apple platforms. Covers the Observation framework, view composition, type-safe navigation, and performance optimization.

When to Activate

Building SwiftUI views and managing state (@State, @Observable, @Binding)
Designing navigation flows with NavigationStack
Structuring view models and data flow
Optimizing rendering performance for lists and complex layouts
Working with environment values and dependency injection in SwiftUI

State Management

Property Wrapper Selection

Choose the simplest wrapper that fits:

Wrapper	Use Case
`@State`	View-local value types (toggles, form fields, sheet presentation)
`@Binding`	Two-way reference to parent's `@State`
`@Observable` class + `@State`	Owned model with multiple properties
`@Observable` class (no wrapper)	Read-only reference passed from parent
`@Bindable`	Two-way binding to an `@Observable` property
`@Environment`	Shared dependencies injected via `.environment()`

@Observable ViewModel

Use @Observable (not ObservableObject) — it tracks property-level changes so SwiftUI only re-renders views that read the changed property:

swift

@Observablefinal class ItemListViewModel {    private(set) var items: [Item] = []    private(set) var isLoading = false    var searchText = ""
    private let repository: any ItemRepository
    init(repository: any ItemRepository = DefaultItemRepository()) {        self.repository = repository    }
    func load() async {        isLoading = true        defer { isLoading = false }        items = (try? await repository.fetchAll()) ?? []    }}

@Observablefinal class ItemListViewModel {    private(set) var items: [Item] = []    private(set) var isLoading = false    var searchText = ""
    private let repository: any ItemRepository
    init(repository: any ItemRepository = DefaultItemRepository()) {        self.repository = repository    }
    func load() async {        isLoading = true        defer { isLoading = false }        items = (try? await repository.fetchAll()) ?? []    }}

View Consuming the ViewModel

swift

struct ItemListView: View {    @State private var viewModel: ItemListViewModel
    init(viewModel: ItemListViewModel = ItemListViewModel()) {        _viewModel = State(initialValue: viewModel)    }
    var body: some View {        List(viewModel.items) { item in            ItemRow(item: item)        }        .searchable(text: $viewModel.searchText)        .overlay { if viewModel.isLoading { ProgressView() } }        .task { await viewModel.load() }    }}

struct ItemListView: View {    @State private var viewModel: ItemListViewModel
    init(viewModel: ItemListViewModel = ItemListViewModel()) {        _viewModel = State(initialValue: viewModel)    }
    var body: some View {        List(viewModel.items) { item in            ItemRow(item: item)        }        .searchable(text: $viewModel.searchText)        .overlay { if viewModel.isLoading { ProgressView() } }        .task { await viewModel.load() }    }}

Environment Injection

Replace @EnvironmentObject with @Environment:

swift

// InjectContentView()    .environment(authManager)
// Consumestruct ProfileView: View {    @Environment(AuthManager.self) private var auth
    var body: some View {        Text(auth.currentUser?.name ?? "Guest")    }}

// InjectContentView()    .environment(authManager)
// Consumestruct ProfileView: View {    @Environment(AuthManager.self) private var auth
    var body: some View {        Text(auth.currentUser?.name ?? "Guest")    }}

View Composition

Extract Subviews to Limit Invalidation

Break views into small, focused structs. When state changes, only the subview reading that state re-renders:

swift

struct OrderView: View {    @State private var viewModel = OrderViewModel()
    var body: some View {        VStack {            OrderHeader(title: viewModel.title)            OrderItemList(items: viewModel.items)            OrderTotal(total: viewModel.total)        }    }}

struct OrderView: View {    @State private var viewModel = OrderViewModel()
    var body: some View {        VStack {            OrderHeader(title: viewModel.title)            OrderItemList(items: viewModel.items)            OrderTotal(total: viewModel.total)        }    }}

ViewModifier for Reusable Styling

swift

struct CardModifier: ViewModifier {    func body(content: Content) -> some View {        content            .padding()            .background(.regularMaterial)            .clipShape(RoundedRectangle(cornerRadius: 12))    }}
extension View {    func cardStyle() -> some View {        modifier(CardModifier())    }}

struct CardModifier: ViewModifier {    func body(content: Content) -> some View {        content            .padding()            .background(.regularMaterial)            .clipShape(RoundedRectangle(cornerRadius: 12))    }}
extension View {    func cardStyle() -> some View {        modifier(CardModifier())    }}

Navigation

Type-Safe NavigationStack

Use NavigationStack with NavigationPath for programmatic, type-safe routing:

swift

@Observablefinal class Router {    var path = NavigationPath()
    func navigate(to destination: Destination) {        path.append(destination)    }
    func popToRoot() {        path = NavigationPath()    }}
enum Destination: Hashable {    case detail(Item.ID)    case settings    case profile(User.ID)}
struct RootView: View {    @State private var router = Router()
    var body: some View {        NavigationStack(path: $router.path) {            HomeView()                .navigationDestination(for: Destination.self) { dest in                    switch dest {                    case .detail(let id): ItemDetailView(itemID: id)                    case .settings: SettingsView()                    case .profile(let id): ProfileView(userID: id)                    }                }        }        .environment(router)    }}

@Observablefinal class Router {    var path = NavigationPath()
    func navigate(to destination: Destination) {        path.append(destination)    }
    func popToRoot() {        path = NavigationPath()    }}
enum Destination: Hashable {    case detail(Item.ID)    case settings    case profile(User.ID)}
struct RootView: View {    @State private var router = Router()
    var body: some View {        NavigationStack(path: $router.path) {            HomeView()                .navigationDestination(for: Destination.self) { dest in                    switch dest {                    case .detail(let id): ItemDetailView(itemID: id)                    case .settings: SettingsView()                    case .profile(let id): ProfileView(userID: id)                    }                }        }        .environment(router)    }}

Performance

Use Lazy Containers for Large Collections

LazyVStack and LazyHStack create views only when visible:

swift

ScrollView {    LazyVStack(spacing: 8) {        ForEach(items) { item in            ItemRow(item: item)        }    }}

ScrollView {    LazyVStack(spacing: 8) {        ForEach(items) { item in            ItemRow(item: item)        }    }}

Stable Identifiers

Always use stable, unique IDs in ForEach — avoid using array indices:

swift

// Use Identifiable conformance or explicit idForEach(items, id: \.stableID) { item in    ItemRow(item: item)}

// Use Identifiable conformance or explicit idForEach(items, id: \.stableID) { item in    ItemRow(item: item)}

Avoid Expensive Work in body

Never perform I/O, network calls, or heavy computation inside body
Use .task {} for async work — it cancels automatically when the view disappears
Use .sensoryFeedback() and .geometryGroup() sparingly in scroll views
Minimize .shadow(), .blur(), and .mask() in lists — they trigger offscreen rendering

Equatable Conformance

For views with expensive bodies, conform to Equatable to skip unnecessary re-renders:

swift

struct ExpensiveChartView: View, Equatable {    let dataPoints: [DataPoint] // DataPoint must conform to Equatable
    static func == (lhs: Self, rhs: Self) -> Bool {        lhs.dataPoints == rhs.dataPoints    }
    var body: some View {        // Complex chart rendering    }}

struct ExpensiveChartView: View, Equatable {    let dataPoints: [DataPoint] // DataPoint must conform to Equatable
    static func == (lhs: Self, rhs: Self) -> Bool {        lhs.dataPoints == rhs.dataPoints    }
    var body: some View {        // Complex chart rendering    }}

Previews

Use #Preview macro with inline mock data for fast iteration:

swift

#Preview("Empty state") {    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))}
#Preview("Loaded") {    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))}

#Preview("Empty state") {    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))}
#Preview("Loaded") {    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))}

Anti-Patterns to Avoid

Using ObservableObject / @Published / @StateObject / @EnvironmentObject in new code — migrate to @Observable
Putting async work directly in body or init — use .task {} or explicit load methods
Creating view models as @State inside child views that don't own the data — pass from parent instead
Using AnyView type erasure — prefer @ViewBuilder or Group for conditional views
Ignoring Sendable requirements when passing data to/from actors

References

See skill: swift-actor-persistence for actor-based persistence patterns. See skill: swift-protocol-di-testing for protocol-based DI and testing with Swift Testing.

來源與署名

來源：affaan-m/ECC位於skills/swiftui-patterns提交ef648e0

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Swiftui Patterns

SwiftUI Patterns

When to Activate

State Management

Property Wrapper Selection

@Observable ViewModel

View Consuming the ViewModel

Environment Injection

View Composition

Extract Subviews to Limit Invalidation

ViewModifier for Reusable Styling

Navigation

Type-Safe NavigationStack

Performance

Use Lazy Containers for Large Collections

Stable Identifiers

Avoid Expensive Work in body

Equatable Conformance

Previews

Anti-Patterns to Avoid

References

來源與署名

更多來自 affaan-m/ECC 的技能

Unified Notifications Ops

Verification Loop

Ui To Vue

Unified Memory

Visa Doc Translate

Team Builder

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices