SwiftUI: Layout & Interfaces

Nov 18 2021 · Swift 5.5, iOS 15, Xcode 13

Part 1: Dynamic View Layout

05. Grids

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 04. Challenge: Nested Scrolling Stacks Next episode: 06. PinnedScrollableViews

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

By this point, you’ve gotten a good handle on all of SwiftUI’s Stacks. Lazy, or not Lazy… …Horizontal, or Vertical. And you know how to nest both dimensions of Stacks within each other.

LazyVGrid {
LazyVGrid(columns: <#[GridItem]#>) {
    LazyVGrid(
      columns: [
        .init()
      ]
    ) {
      columns: [
        .init(),
        .init(),
        .init()
      ]
      columns: [
        .init(.fixed(50)),
        .init(),
.init(.fixed(50)),
.init(.flexible()),
.init()
        .init(.fixed(50)),
        .init(.flexible(minimum: 200)),
        .init()
.init(.adaptive(minimum: <#T##CGFloat#>, maximum: <#T##CGFloat#>))
.init(.adaptive(minimum: 100))
        .init(.flexible(maximum: 100)),
        .init(.adaptive(minimum: 30))
//        .init(.fixed(50)),
//        .init(.flexible(maximum: 100)),
        .init(.adaptive(minimum: 30))
        .init(.fixed(50), spacing: 30),
        .init(.flexible(maximum: 100), spacing: 30),
        .init(.adaptive(minimum: 30), spacing: 30)
    LazyHGrid(
    LazyHGrid(
      rows: [
      .frame(height: 125)
.frame(width: 125)
      rows: [
        .init(.fixed(300), spacing: 30),
        .init(.flexible(maximum: 200), spacing: 30),
        .init(.adaptive(minimum: 50), spacing: 30)
      ]
  var body: some View {
    ScrollView(.horizontal) {
      LazyHGrid(
        rows: [
          .init(.fixed(300), spacing: 30),
          .init(.flexible(maximum: 200), spacing: 30),
          .init(.adaptive(minimum: 50), spacing: 30)
        ]
      ) {
        ForEach(
          Genre.list.randomElement()!.subgenres.shuffled().prefix(20),
          content: \.view
        )
      }
      .padding(.horizontal)
    }
  }
Genre.list.randomElement()!.subgenres,