← ClaudeAtlas

swiftui-layout-componentslisted

Build SwiftUI layouts using stacks, grids, lists, scroll views, forms, and controls. Covers VStack/HStack/ZStack, LazyVGrid/LazyHGrid, List with sections and swipe actions, ScrollView with ScrollViewReader, Form with validation, Toggle/Picker/Slider, .searchable, and overlay patterns. Use when building data-driven layouts, collection views, settings screens, search interfaces, or transient overlay UI.
dpearson2699/swift-ios-skills · ★ 640 · Web & Frontend · score 81
Install: claude install-skill dpearson2699/swift-ios-skills
# SwiftUI Layout & Components Layout and component patterns for SwiftUI apps targeting iOS 26+ with Swift 6.3. Covers stack and grid layouts, list patterns, scroll views, forms, controls, search, and overlays. Patterns are backward-compatible to iOS 17 unless noted. ## Contents - [Layout Fundamentals](#layout-fundamentals) - [Grid Layouts](#grid-layouts) - [List Patterns](#list-patterns) - [ScrollView](#scrollview) - [Form and Controls](#form-and-controls) - [Searchable](#searchable) - [Overlay and Presentation](#overlay-and-presentation) - [Common Mistakes](#common-mistakes) - [Review Checklist](#review-checklist) - [References](#references) ## Layout Fundamentals ### Standard Stacks Use `VStack`, `HStack`, and `ZStack` for small, fixed-size content. They render all children immediately. ```swift VStack(alignment: .leading, spacing: 8) { Text(title).font(.headline) Text(subtitle).font(.subheadline).foregroundStyle(.secondary) } ``` ### Lazy Stacks Use `LazyVStack` and `LazyHStack` inside `ScrollView` for large or dynamic collections. They create child views on demand as they scroll into view. ```swift ScrollView { LazyVStack(spacing: 12) { ForEach(items) { item in ItemRow(item: item) } } .padding(.horizontal) } ``` **When to use which:** - **Non-lazy stacks:** Small, fixed content (headers, toolbars, forms with few fields) - **Lazy stacks:** Large or unknown-size collections, feeds, chat messages ## Grid Layouts Us