Question

我想创建一个网格，该网格包含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在我的Rectangle上添加框架，等等。无法实现。我真的必须使用GeometryReader以编程方式进行数学运算吗？

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

Answer 1

GridItem会根据内容的大小进行填充/对齐，但是Rectangle没有自己的大小，因此您会使用一些最小的默认值。

这是一个可能的解决方案（已通过Xcode 12 / iOS 14测试）

struct AllAchievementsView: View {
    
    let sp = CGFloat(5)
    var gridRows: Array<GridItem> { Array(repeating: GridItem(spacing: sp), count: 4) }

    var body: some View {
        
        GeometryReader { gp in
            ZStack {
                    Color.black
                    LazyHGrid(rows: gridRows, spacing: sp) {
                         ForEach(0..<24) { index in
                              RoundedRectangle(cornerRadius: 10).foregroundColor(.blue)
                                .frame(width: gp.size.width / 6 - 2*sp)
                         }
                    }
                    .padding()
            }
        }
    }
}

SwiftUI：如何使GridItem推出以填充可用空间

1 个答案: