I have a LazyVGrid that contains 5 columns. I have set the maxWidth
to the geometry width which seems to work, however the LazyVGrid doesn't seem to respect this width and is cropping subviews. Is there any way around this?
This code:
struct ContentView: View {
let data = (1...20).map { "Item \($0)" }
func columns(_ count: Int, totalWidth: CGFloat) -> [GridItem] {
var columns: [GridItem] = []
for _ in 1...count {
columns.append(GridItem(.fixed(totalWidth/CGFloat(count))))
print("GEOMETRY WIDTH: \(totalWidth)")
print("UIScreen WIDTH: \(UIScreen.main.bounds.width)")
}
return columns
}
var body: some View {
GeometryReader { geometry in
ScrollView {
ForEach(data, id: \.self) { item in
LazyHStack(alignment: .center, spacing: .none, pinnedViews: .sectionHeaders) {
LazyVGrid(columns: columns((1...10).randomElement() ?? 1, totalWidth: geometry.size.width)) {
ForEach(data, id: \.self) { item in
Text(item)
}
}
.frame(width: geometry.size.width)
}
.frame(width: geometry.size.width)
}
}
}
}
}
Produces this result
Ideally, i'd like the views to overflow to the next row if they don't fit.