SwiftUI:如何使 GridItem 推出以填充可用 space
SwiftUI: How to make GridItem pushing out to fill the available space
我想创建一个 4 行包含 24 个项目的网格,因此每行应该有 6 个项目。所有项目都应 大小相等 但填充整个 space 可用,无论网格在什么设备上呈现。
我已经实现了行的灵活高度,但是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 以编程方式进行数学运算吗?
我添加两张图片:一张显示这段代码的结果,另一张显示我想要实现的。
根据内容的大小GridItem
是filled/aligned,但是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()
}
}
}
}
我想创建一个 4 行包含 24 个项目的网格,因此每行应该有 6 个项目。所有项目都应 大小相等 但填充整个 space 可用,无论网格在什么设备上呈现。
我已经实现了行的灵活高度,但是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 以编程方式进行数学运算吗?
我添加两张图片:一张显示这段代码的结果,另一张显示我想要实现的。
根据内容的大小GridItem
是filled/aligned,但是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()
}
}
}
}