dimillian/swiftui-ui-patterns

swiftui-ui-patterns 是做什么的？

构建 SwiftUI 视图和组件的最佳实践与示例驱动指南，涵盖导航层次结构、自定义视图修饰符以及使用堆栈和网格实现响应式布局。适用于创建或重构 SwiftUI UI、设计 TabView 标签架构、用 VStack/HStack 组合屏幕、管理 @State 或 @Binding、构建声明式 iOS 界面，或需要组件级模式和示例时。

概述

该技能提供了丰富的 SwiftUI 模式，帮助开发者高效构建 iOS 和 macOS 应用界面。涵盖以下关键领域：

• 导航架构：使用 NavigationStack、NavigationLink 实现分层导航。
• 视图修饰符：通过自定义 ViewModifier 复用样式逻辑。
• 响应式布局：使用 VStack、HStack、ZStack 以及网格布局（LazyVGrid、LazyHGrid）组织内容。
• 状态管理：利用 @State、@Binding、@ObservedObject 等管理数据流。
• 组件模式：提供常见的 UI 组件实现，如标签栏（TabView）、列表（List）、表单（Form）、卡片等。

核心概念

1. 导航层次结构

在 SwiftUI 中，导航通过 NavigationStack 实现（iOS 16+）或使用 NavigationView（旧版本）。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(items) { item in
                NavigationLink(item.name, value: item)
            }
            .navigationDestination(for: Item.self) { item in
                DetailView(item: item)
            }
            .navigationTitle("Items")
        }
    }
}

2. 自定义视图修饰符

创建可复用的修饰符以封装常见样式：

struct CardStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color(.systemBackground))
            .cornerRadius(12)
            .shadow(color: .gray.opacity(0.3), radius: 5, x: 0, y: 2)
    }
}

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

3. 响应式布局

使用堆栈和网格创建灵活布局：

struct GridGallery: View {
    let columns = [
        GridItem(.adaptive(minimum: 100))
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(0..<20) { index in
                    Rectangle()
                        .fill(Color.blue)
                        .frame(height: 100)
                        .overlay(Text("\(index)"))
                }
            }
            .padding()
        }
    }
}

4. 状态与绑定

管理视图内部状态和父子视图间数据传递：

struct ParentView: View {
    @State private var isOn = false
    
    var body: some View {
        ToggleView(isOn: $isOn)
    }
}

struct ToggleView: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Toggle("Enable", isOn: $isOn)
    }
}

平台支持

该技能适用于所有 Apple 平台：iOS、iPadOS、macOS、watchOS 和 tvOS。示例代码使用 SwiftUI 最新语法，建议使用 Xcode 14+ 和 Swift 5.7+ 以获得最佳兼容性。

如何贡献

欢迎提交改进或新的模式示例。请遵循以下步骤：

1. 确保示例代码简洁且可运行。
2. 添加清晰的注释和说明。
3. 保持格式与现有文档一致。

许可证

该项目采用 MIT 许可证。详见 LICENSE 文件。