AgentSkillsCN

ios-swiftui-development

使用 SwiftUI 构建现代化的 iOS 应用。当您需要创建 UI 组件、实现导航逻辑、管理状态、构建列表与表单、添加动画效果,或与 UIKit 进行深度集成时,可使用此功能。本指南涵盖 SwiftUI 的最佳实践、常用模式,以及面向 iOS/iPadOS/macOS/watchOS/visionOS 的性能优化技巧。

SKILL.md
--- frontmatter
name: ios-swiftui-development
description: Build modern iOS apps with SwiftUI. Use when creating UI components, implementing navigation, handling state management, building lists/forms, adding animations, or integrating with UIKit. Covers SwiftUI best practices, common patterns, and performance optimization for iOS/iPadOS/macOS/watchOS/visionOS.

iOS SwiftUI Development

Build beautiful, performant iOS applications using SwiftUI's declarative syntax.

Quick Reference

View Basics

swift
struct ContentView: View {
    @State private var count = 0
    
    var body: some View {
        VStack(spacing: 16) {
            Text("Count: \(count)")
                .font(.title)
            Button("Increment") { count += 1 }
                .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

Property Wrappers

WrapperUse Case
@StateLocal view state (value types)
@BindingTwo-way connection to parent state
@StateObjectOwn an ObservableObject
@ObservedObjectReference external ObservableObject
@EnvironmentObjectShared data through view hierarchy
@EnvironmentSystem values (colorScheme, locale)
@AppStorageUserDefaults persistence
@FocusStateKeyboard focus management

Navigation (iOS 16+)

swift
// NavigationStack with typed destinations
NavigationStack {
    List(items) { item in
        NavigationLink(value: item) {
            Text(item.title)
        }
    }
    .navigationDestination(for: Item.self) { item in
        DetailView(item: item)
    }
}

// Programmatic navigation
@State private var path = NavigationPath()

NavigationStack(path: $path) {
    Button("Go to Detail") {
        path.append(someItem)
    }
}

Lists & Grids

swift
// Dynamic List
List(items) { item in
    ItemRow(item: item)
}
.listStyle(.insetGrouped)

// LazyVGrid
LazyVGrid(columns: [
    GridItem(.flexible()),
    GridItem(.flexible())
], spacing: 16) {
    ForEach(items) { item in
        ItemCard(item: item)
    }
}

Async Data Loading

swift
struct AsyncContentView: View {
    @State private var data: [Item] = []
    @State private var isLoading = false
    
    var body: some View {
        List(data) { item in
            Text(item.name)
        }
        .overlay {
            if isLoading {
                ProgressView()
            }
        }
        .task {
            isLoading = true
            data = await fetchData()
            isLoading = false
        }
        .refreshable {
            data = await fetchData()
        }
    }
}

Animations

swift
// Implicit animation
Text("Hello")
    .scaleEffect(isExpanded ? 1.5 : 1.0)
    .animation(.spring(response: 0.3), value: isExpanded)

// Explicit animation
withAnimation(.easeInOut(duration: 0.3)) {
    isExpanded.toggle()
}

// Transition
if showDetail {
    DetailView()
        .transition(.move(edge: .trailing).combined(with: .opacity))
}

Custom Modifiers

swift
struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.regularMaterial)
            .cornerRadius(12)
            .shadow(radius: 4)
    }
}

extension View {
    func cardStyle() -> some View {
        modifier(CardModifier())
    }
}

Common Patterns

MVVM with ObservableObject

swift
@MainActor
class ItemViewModel: ObservableObject {
    @Published var items: [Item] = []
    @Published var isLoading = false
    @Published var error: Error?
    
    func loadItems() async {
        isLoading = true
        defer { isLoading = false }
        
        do {
            items = try await apiService.fetchItems()
        } catch {
            self.error = error
        }
    }
}

struct ItemListView: View {
    @StateObject private var viewModel = ItemViewModel()
    
    var body: some View {
        List(viewModel.items) { item in
            Text(item.name)
        }
        .task { await viewModel.loadItems() }
    }
}

Dependency Injection

swift
// Environment key
struct APIServiceKey: EnvironmentKey {
    static let defaultValue: APIService = LiveAPIService()
}

extension EnvironmentValues {
    var apiService: APIService {
        get { self[APIServiceKey.self] }
        set { self[APIServiceKey.self] = newValue }
    }
}

// Usage
@Environment(\.apiService) var apiService

Performance Tips

  1. Use @ViewBuilder wisely - Avoid complex logic in body
  2. Prefer LazyVStack/LazyHStack for long lists
  3. Use equatable() modifier to prevent unnecessary redraws
  4. Extract subviews to isolate state changes
  5. Use task(id:) for cancellable async work

Resources

See references/swiftui-components.md for component catalog. See references/swiftui-tips.md for advanced tips.

External Links