Stacks, Grids, and Outlines in SwiftUI

2:08 - Sandwich and HeroView

// Sandwich model and gallery item view

struct Sandwich: Identifiable {
    var id = UUID()
    var name: String
    var rating: Int
    var heroImage: Image { … }
}

struct HeroView: View {
    var sandwich: Sandwich
    var body: some View {
        sandwich.heroImage
            .resizable()
            .aspectRatio(contentMode: .fit)
            .overlay(BannerView(sandwich: sandwich))
    }
}

2:26 - Sandwich Info Banner

// Banner overlay view for sandwich info

struct BannerView: View {
    var sandwich: Sandwich
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Spacer()
            TitleView(title: sandwich.name)
            RatingView(rating: sandwich.rating)
        }
        .padding(…)
        .background(…)
    }
}

2:34 - Sandwich Rating View

// Sandwich rating view

struct RatingView: View {
    var rating: Int
    var body: some View {
        HStack {
            ForEach(0..<5) { starIndex in
                StarImage(isFilled: rating > starIndex)
            }
            Spacer()
        }
    }
}

2:39 - Scrollable Stack of HeroViews

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

ScrollView {
    VStack(spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

3:53 - Scrollable Stack of HeroViews

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

ScrollView {
    VStack(spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

3:57 - Scrollable Lazy Stack of HeroViews

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

ScrollView {
    LazyVStack(spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

6:09 - Scrollable Lazy Stack of HeroViews

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

ScrollView {
    LazyVStack(spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

6:18 - Three-Column Grid of Sandwiches

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

// Define grid columns
var columns = [
    GridItem(spacing: 0),
    GridItem(spacing: 0),
    GridItem(spacing: 0)
]

ScrollView {
    LazyVGrid(columns: columns, spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

7:13 - Adaptive Grid of Sandwiches

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

// Define grid columns
var columns = [
    GridItem(.adaptive(minimum: 300), spacing: 0)
]

ScrollView {
    LazyVGrid(columns: columns, spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

8:47 - Outline of GraphicRows

struct GraphicsList: View {
    var graphics: [Graphic]
    var body: some View {
        List(
            graphics,
            children: \.children
        ) { graphic in
            GraphicRow(graphic)
        }
        .listStyle(SidebarListStyle())
    }
}

9:52 - Customizing your outlines

// Customizing your outlines

List {
    ForEach(canvases) { canvas in
        Section(header: Text(canvas.name)) {
            OutlineGroup(canvas.graphics, children: \.children)
            { graphic in
                GraphicRow(graphic)
            }
        }
    }
}

13:10 - DisclosureGroup

// Progressive display of information
Form {
    DisclosureGroup(isExpanded: $areFillControlsShowing) {
       Toggle("Fill shape?", isOn: isFilled)
       ColorRow("Fill color", color: fillColor)
    } label: {
       Label("Fill", …)
    }
    …
}