Swiftui Ui Patterns

SwiftUI UI Patterns is a community skill for implementing common user interface patterns in SwiftUI, covering form design, list interactions, sheet presentations, search interfaces, tab navigation, and responsive layout patterns.

What Is This?

Overview

SwiftUI UI Patterns provides recipes for building standard interface elements in SwiftUI applications. It covers form design with validation, sections, and picker integration for data entry screens, list interactions with swipe actions, pull-to-refresh, and contextual menus, sheet and fullscreen cover presentations with detent configurations and dismiss handling, search interfaces with searchable modifier, search suggestions, and search scopes, and responsive layouts that adapt between compact and regular size classes. The skill enables developers to implement polished UI patterns that follow Apple Human Interface Guidelines.

Who Should Use This

This skill serves iOS developers building standard interface screens like settings, lists, and detail views, teams creating consistent navigation and presentation patterns across an application, and engineers implementing adaptive layouts for iPhone and iPad.

Why Use It?

Problems It Solves

Form validation in SwiftUI requires combining multiple modifiers and state variables without a built-in validation framework. Sheet presentations need careful state management to prevent stale data when re-presenting. List performance with swipe actions and context menus requires proper view extraction. Adaptive layouts need size class detection and conditional view hierarchies.

Core Highlights

Form builder combines validation with SwiftUI Form sections and controls. List interaction patterns integrate swipe, context menu, and pull-to-refresh. Sheet presentation manages detents, dismiss callbacks, and data passing. Adaptive layout responds to size class changes with conditional structures.

How to Use It?

Basic Usage

import SwiftUI

struct SettingsView: View {
    @AppStorage("username")
    private var username = ""
    @AppStorage("notify")
    private var notify = true
    @AppStorage("theme")
    private var theme =
        "system"

    var body: some View {
        NavigationStack {
            Form {
                Section(
                    "Profile") {
                    TextField(
                        "Username",
                        text:
                            $username)
                    .textContentType(
                        .username)
                }

                Section(
                    "Preferences"
                ) {
                    Toggle(
                        "Notifications",
                        isOn:
                            $notify)
                    Picker(
                        "Theme",
                        selection:
                            $theme
                    ) {
                        Text(
                            "System")
                            .tag(
                                "system")
                        Text(
                            "Light")
                            .tag(
                                "light")
                        Text(
                            "Dark")
                            .tag(
                                "dark")
                    }
                }
            }
            .navigationTitle(
                "Settings")
        }
    }
}

Real-World Examples

import SwiftUI

// List with interactions
struct TaskListView: View {
    @State private var tasks:
        [TaskItem] =
            TaskItem.samples
    @State private var search
        = ""

    var body: some View {
        NavigationStack {
            List {
                ForEach(tasks) {
                    task in
                    TaskRow(
                        task: task)
                    .swipeActions(
                        edge:
                            .trailing
                    ) {
                        Button(
                            role:
                                .destructive
                        ) {
                            delete(
                                task)
                        } label: {
                            Label(
                                "Delete",
                                systemImage:
                                    "trash")
                        }
                    }
                    .contextMenu {
                        Button(
                            "Edit"
                        ) {
                            edit(
                                task)
                        }
                        Button(
                            "Share"
                        ) {
                            share(
                                task)
                        }
                    }
                }
            }
            .searchable(
                text: $search)
            .refreshable {
                await reload()
            }
            .navigationTitle(
                "Tasks")
        }
    }

    func delete(
        _ t: TaskItem) {
        tasks.removeAll {
            $0.id == t.id }
    }
    func edit(
        _ t: TaskItem) {}
    func share(
        _ t: TaskItem) {}
    func reload() async {}
}

Advanced Tips

Use sheet(item:) over sheet(isPresented:) for data-driven presentation that passes context to the presented view. Implement search with debounce using task(id:) modifier to cancel previous searches on new input. Use ViewThatFits to select between layout alternatives based on available space.

When to Use It?

Use Cases

Build a settings screen with grouped form sections and AppStorage persistence. Create an interactive task list with swipe-to-delete, context menus, and pull-to-refresh. Implement an adaptive master-detail layout using NavigationSplitView.

Related Topics

SwiftUI Form, List, sheet, searchable, and adaptive layout.

Important Notes

Requirements

iOS 16 or later for NavigationStack and sheet detents. iOS 17 for searchable scopes and ViewThatFits. Xcode 15 or later for current SwiftUI tooling.

Usage Recommendations

Do: use Form for settings and data entry screens as it provides automatic platform styling. Prefer swipeActions over custom gesture recognizers for list interactions. Use presentationDetents to configure sheet height options.

Don't: build custom form controls when standard SwiftUI controls like Toggle and Picker provide native behavior. Nest sheets more than one level which causes presentation bugs. Ignore size class changes when building layouts that should adapt between iPhone and iPad.

Limitations

Form styling varies across platforms and cannot be fully customized without losing native appearance. Sheet detent customization is limited to predefined sizes without custom height breakpoints. Search scopes require iOS 16 or later limiting backward compatibility.