如何实现偏好 1 或 2 列的自适应 LazyVGrid？

Question

我有不同数量的数据需要按照下图显示，请注意当数据量奇数时，网格如何将相关项目拉伸到跨两列

到目前为止，我最好的尝试就是拥有像这样的

LazyVGrid

LazyVGrid(
  columns: [GridItem(.adaptive(minimum: thirdOfScreen, maximum: .infinity))], 
  spacing: 8
) {
 // ...
}

这里的

thirdOfScreen

本质上就是它所说的，屏幕宽度的三分之一。这是我尝试强制每行仅包含 2 个项目（使用第三个而不是一半来考虑项目之间和周围的各种填充）。

这在一定程度上有效，但是如果有 1 或 3 个项目，它们不会拉伸到行的整个宽度。

Answer 1

您可以使用

Grid

和

GridRow

定义布局，并使用

gridCellColumns

指定每个单元格在网格内占据的空间。

在此示例中，网格分为 4 列。每个

GridRow

指定每个单元格将占用多少列。

接下来，您可以实现您的逻辑来了解最后一个

GridRow

是否有一个或两个单元格。

struct ContentView: View {

  var body: some View {
    Grid {
      GridRow {
        Color.pink
          .gridCellColumns(2) // Takes up 2 out of 4 columns
        Color.green
          .gridCellColumns(2) // Takes up the remaining 2 columns
      }
      GridRow {
        Color.pink
          .gridCellColumns(1) // Takes up 1 out of 4 columns
        Color.blue
          .gridCellColumns(1) // Takes up 1 out of 4 columns
        Color.purple
          .gridCellColumns(2) // Takes up 2 out of 4 columns
      }
      GridRow {
        Color.cyan
          .gridCellColumns(4) // Takes up all 4 columns
      }
    }
  }
}