标签: lazyhgrid

我想创建一个4 行 24 个项目的网格，因此每行应该有 6 个项目。无论网格在什么设备上渲染，所有项目都应该大小相同，但填充整个可用空间。

我已经实现了行的灵活高度，但是 GridItems 不会在水平维度上推出，尽管它是一个形状，据说是推出的。在 LazyHGrid 中，它似乎不会被推出。

这是我的代码：

struct AllAchievementsView: View {
    
    var gridRows: Array<GridItem>  { [GridItem(), GridItem(), GridItem(), GridItem()] }

    var body: some View {
        
        ZStack {
            Color.black
            LazyHGrid(rows: gridRows) {
                ForEach(0..<24) { index in
                    RoundedRectangle(cornerRadius: 10).foregroundColor(.blue)
                }
            }.padding()
        }
    }
}

我尝试了 GridItem 大小调整的所有变体，我尝试使用 .infity 在我的矩形上添加框架，等等，但无法实现。我真的必须使用 GeometryReader 以编程方式进行数学计算吗？

我添加两张图像：一张显示此代码的结果，另一张显示我想要实现的内容。

如何使图像和文本对齐方式与 SwiftUI LazyVGrid 中的其他 3 个对齐方式相同，如下图所示？

我认为问题是如果文本是多行的，如何使文本从顶部开始。在Android中，我可以使用gravity =“top | center”，但在SwiftUI中，我使用.multilineTextAlignment（.center），但结果并不像我预期的那样。

这是我在代码中尝试的内容：

      LazyVGrid(columns: gridItemLayout, spacing: 0) {
          ForEach((0...7), id: \.self) { i in
               VStack {
                    RemoteImageView(url: vm.listService[i].image_uri)
                        .frame(width: 100, height: 100)
                    Text(vm.listService[i].name)
                        .font(.body)
                        .multilineTextAlignment(.center)
                        .frame(maxWidth: .infinity, alignment: .center)
               }
         }
      }
      .padding(.horizontal, 25.0)