swiftui-advanced

Advanced SwiftUI Patterns

ViewModifier Composition

Create reusable ViewModifiers for common styling:

// ✅ ADVANCED - Composable ViewModifiers
struct DuckDuckGoButtonStyle: ViewModifier {
    let style: ButtonStyleType
    
    func body(content: Content) -> some View {
        content
            .padding(.horizontal, 16)
            .padding(.vertical, 12)
            .background(backgroundColorForStyle())
            .foregroundColor(textColorForStyle())
            .cornerRadius(8)
            .font(.body.weight(.medium))
    }
    
    private func backgroundColorForStyle() -> Color {
        switch style {
        case .primary:
            return Color(designSystemColor: .buttonPrimaryBackground)
        case .secondary:
            return Color(designSystemColor: .buttonSecondaryBackground)
        case .ghost:
            return .clear
        }
    }
    
    private func textColorForStyle() -> Color {
        switch style {
        case .primary:
            return Color(designSystemColor: .buttonPrimaryText)
        case .secondary:
            return Color(designSystemColor: .buttonSecondaryText)
        case .ghost:
            return Color(designSystemColor: .textLink)
        }
    }
}

// Usage
extension View {
    func duckDuckGoButtonStyle(_ style: ButtonStyleType) -> some View {
        modifier(DuckDuckGoButtonStyle(style: style))
    }
}

PreferenceKey for Cross-View Communication

Use PreferenceKey for sophisticated view communication:

// ✅ ADVANCED - PreferenceKey for collecting data from child views
struct ViewSizePreferenceKey: PreferenceKey {
    static var defaultValue: [String: CGSize] = [:]
    
    static func reduce(value: inout [String: CGSize], nextValue: () -> [String: CGSize]) {
        value.merge(nextValue()) { $1 }
    }
}

struct SizeReportingView<Content: View>: View {
    let id: String
    let content: Content
    
    init(id: String, @ViewBuilder content: () -> Content) {
        self.id = id
        self.content = content()
    }
    
    var body: some View {
        content
            .background(
                GeometryReader { geometry in
                    Color.clear
                        .preference(key: ViewSizePreferenceKey.self, 
                                  value: [id: geometry.size])
                }
            )
    }
}

// Usage
struct ParentView: View {
    @State private var childSizes: [String: CGSize] = [:]
    
    var body: some View {
        VStack {
            SizeReportingView(id: "header") {
                HeaderView()
            }
            
            SizeReportingView(id: "content") {
                ContentView()
            }
        }
        .onPreferenceChange(ViewSizePreferenceKey.self) { sizes in
            self.childSizes = sizes
        }
    }
}