Swift Grids and Lazy Layout

How it works

LazyVGrid can adapt columns to available width, and a scroll container gives it a meaningful lazy viewport. Lazy stacks create content as needed, but lazy does not mean network requests or state are automatically cached. Stable identities keep row updates associated with the intended records.

Apple-only setup and review status

Create a separate iOS SwiftUI App learning project in a suitable Xcode version, choose an appropriate simulator/device and replace the generated app/view Swift source with this complete file. Keep one @main entry point. Widget and App Clip lessons explicitly require their own extension/clip targets instead; capability, purpose-string, entitlement and account steps in the lesson must be completed separately. No Xcode project, signing certificate, account or service was provisioned here.

Bhylu has no Swift browser runner. The JavaScript/Python editors do not run these sources; Apache, PHP and MySQL are not required. Downloads are source text, never executable teaching endpoints.

Download the complete grids-lazy-layout.swift · Download all source files with hash checks

For the optional collection, save download-examples.mjs in a new folder and run node download-examples.mjs. A local preview uses node download-examples.mjs http://127.0.0.1:8000/examples/swift/. It refuses an existing bhylu-swift-examples folder and installs or executes no Swift automatically. Apple-only files remain separate Xcode learning examples, not a portable Swift package target.

Example

// Apple-only learning file: iOS 17+ target with a suitable Xcode SDK.
// Not compiled or run in this Windows/Linux review.
import SwiftUI


struct DemoView: View {
    private let columns = [GridItem(.adaptive(minimum: 140), spacing: 16)]
    private let pieces = ["P-31", "P-18", "P-42", "P-50", "P-63", "P-72"]
    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 20) {
                Text("Ready pieces").font(.title)
                LazyVGrid(columns: columns, spacing: 16) {
                    ForEach(pieces, id: \.self) { id in
                        Text(id).frame(maxWidth: .infinity, minHeight: 80)
                            .background(.blue.opacity(0.1), in: RoundedRectangle(cornerRadius: 12))
                    }
                }
            }
            .padding()
        }
    }
}

@main
struct WorkshopDemoApp: App {
    var body: some Scene { WindowGroup { DemoView() } }
}

Expected behaviour and manual checks

Manual check: narrow and widen the window or rotate the simulator. Columns should adapt without unreadable labels. Test scrolling with a larger fixture. Apple rendering was not tested here.

Each fixture identifier is unique and stable. A real model should expose a persistent identity rather than generating a UUID in body. Nested lazy containers are shown to explain their roles; choose only the containers your actual layout needs.