CODEWITHSUNDEEP
swiftuilazyvgrid
Tycho Pandelaar
Tycho Pandelaar

Reputation: 7535

I can't get my LazyVGrid to show more than two rows

So I've got this very basic grid. It's 5 columns and should have 3 rows. But I can't get the compiler to compile anything more than two rows....

The compiler complains : 'Extra arguments at positions #11, #12, #13, #14, #15 in call'

If I remove Text 6 to 10 it does compile....

Code:

struct ContentView: View {
    var columns = [
        GridItem(spacing: 8, alignment: .leading),
        GridItem(spacing: 8, alignment: .center),
        GridItem(spacing: 8, alignment: .center),
        GridItem(spacing: 8, alignment: .center),
        GridItem(spacing: 8, alignment: .center)
    ]

    var body: some View {
        LazyVGrid(columns: columns, spacing: 8) {
            Text("Buttons").font(.headline)
            Text("resting").font(.subheadline)
            Text("active").font(.subheadline)
            Text("loading").font(.subheadline)
            Text("disabled").font(.subheadline)

            Text("1").font(.headline)
            Text("2").font(.subheadline)
            Text("3").font(.subheadline)
            Text("4").font(.subheadline)
            Text("5").font(.subheadline)

            Text("6").font(.headline)
            Text("7").font(.subheadline)
            Text("8").font(.subheadline)
            Text("9").font(.subheadline)
            Text("10").font(.subheadline)
        }.padding(.horizontal, 10)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Upvotes: 2

Views: 963

Answers (1)

Asperi
Asperi

Reputation: 257789

You've got into ViewBuilder 10-views-limit... so as you use static content then you have to wrap some in Group/s to fit that rule (ie. no more than 10 views in build block)

So, like

var body: some View {
    LazyVGrid(columns: columns, spacing: 8) {
      Group {
        Text("Buttons").font(.headline)
        Text("resting").font(.subheadline)
        Text("active").font(.subheadline)
        Text("loading").font(.subheadline)
        Text("disabled").font(.subheadline)
      }

      Group {
        Text("1").font(.headline)
        Text("2").font(.subheadline)
        Text("3").font(.subheadline)
        Text("4").font(.subheadline)
        Text("5").font(.subheadline)

        Text("6").font(.headline)
        Text("7").font(.subheadline)
        Text("8").font(.subheadline)
        Text("9").font(.subheadline)
        Text("10").font(.subheadline)
      }

      Group {
         ... other code
      }
    }.padding(.horizontal, 10)
}

Note: Group is also view, so there should be no more than 10 groups as well... but groups can contain other groups...

But... of course it is preferable to work with dynamic content, like ForEach, just in case.

Upvotes: 2

Related Questions