swiftui-layout-components

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 ScrollPosition, 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.

741stars40forksUpdated 6/15/2026

Documentation #ios #ui-layout #mobile-development #documentation #swift #swiftui

Security Assessment

Low Risk(80/100)

Detected risks:

Sensitive File Access([references/list.md] .env)

Security Score80/100

About swiftui-layout-components

The swiftui-layout-components skill provides comprehensive guidance for building modern SwiftUI user interfaces using native layout containers and components. It focuses on iOS 26+ with Swift 6.3 while maintaining backward compatibility to iOS 17, covering essential building blocks like stacks (VStack, HStack, ZStack), lazy containers (LazyVStack, LazyHStack), grid layouts (LazyVGrid, LazyHGrid), lists with sections and swipe actions, scroll views with position tracking, forms with validation, and standard controls like Toggle, Picker, and Slider. The skill emphasizes performance optimization through lazy loading patterns and proper component selection based on content size and type.

Key features include adaptive and fixed-column grid layouts for galleries and icon pickers, feed-style list patterns with built-in row reuse and accessibility, scroll view management with ScrollPosition API, form building with validation patterns, searchable modifiers for filtering interfaces, and overlay presentation techniques for transient UI. The skill provides concrete code examples for each pattern, explains when to use lazy versus eager loading, and covers styling options like list styles, row customization, and iOS 26-specific scroll edge effects. It also addresses common pitfalls such as GeometryReader misuse in lazy containers and improper stack selection for large collections.

This skill is designed for iOS developers building data-driven applications, settings interfaces, content feeds, media galleries, search experiences, and form-based workflows. It helps developers make informed decisions about layout container selection, optimize rendering performance for large datasets, implement platform-consistent UI patterns, and leverage the latest SwiftUI APIs while maintaining backward compatibility. The skill is particularly valuable for teams transitioning from UIKit or developers seeking to master SwiftUI's declarative layout system and performance characteristics.

FAQ

When should I use lazy stacks versus regular stacks?

Use regular VStack/HStack/ZStack for small, fixed-size content like headers, toolbars, or forms with few fields since they render all children immediately. Use LazyVStack/LazyHStack inside ScrollView for large or dynamic collections where on-demand rendering improves performance, such as feeds, chat messages, or unknown-size lists.

What iOS versions does this skill support?

This skill targets iOS 26+ with Swift 6.3 as the primary version, but all patterns are backward-compatible to iOS 17 unless explicitly noted. Some features like scroll edge effects are iOS 26-specific and documented as such.

Should I use List or LazyVStack for my content?

Use List for feed-style content and settings rows where you need built-in row reuse, selection handling, swipe actions, and accessibility features. Use LazyVStack inside ScrollView when you need more control over layout, custom styling beyond list capabilities, or when building non-list-like scrolling interfaces.

Why shouldn't I use GeometryReader inside lazy containers?

Placing GeometryReader inside lazy containers like LazyVStack or LazyVGrid forces eager measurement of all children, defeating the performance benefits of lazy loading. Instead, use .onGeometryChange (iOS 16+) if you need to read dimensions while preserving lazy behavior.

How do I create adaptive grid layouts that work across device sizes?

Use GridItem(.adaptive(minimum:maximum:)) for columns that automatically adjust count based on available width. For example, GridItem(.adaptive(minimum: 120, maximum: 1024)) creates as many columns as fit while respecting minimum and maximum sizes. Use .aspectRatio for consistent cell sizing without GeometryReader.