我想创建一个 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 大小的所有变体,我尝试在我的 Rectangle 上添加一个带有 .infity 的框架,等等,但无法实现。我真的必须使用 GeometryReader 以编程方式进行数学运算吗?
我添加两张图片:一张显示这段代码的结果,另一张显示我想要实现的内容。
最佳答案
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()
}
}
}
}
关于layout - SwiftUI:如何使 GridItem 推出以填充可用空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64582755/