我无法让我的 LazyVGrid 显示超过两行答案

【问题标题】：I can't get my LazyVGrid to show more than two rows我无法让我的 LazyVGrid 显示超过两行
【发布时间】：2020-07-02 21:34:44
【问题描述】：

所以我有这个非常基本的网格。它有 5 列，应该有 3 行。但是我不能让编译器编译超过两行的东西......

编译器报错：“调用中位置#11、#12、#13、#14、#15 的额外参数”

如果我删除文本 6 到 10，它会编译......

代码：

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()
    }
}

【问题讨论】：

标签： swiftui lazyvgrid

【解决方案1】：

您已进入 ViewBuilder 10-views-limit... 所以当您使用静态内容时，您必须将一些内容包装在 Group/s 中以适应该规则（即不超过 10 个视图积木）

所以，像

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)
}

注意： Group 也是视图，所以也不能超过 10 个组...但是组可以包含其他组...

但是...当然最好使用动态内容，例如 ForEach，以防万一。

【讨论】：