Spacing between sections in the same LazyVGrid? - swiftui

Question

Might be a dumb question and I might have already answered this myself. But, I am trying to put a space between my sections of grids. Currently I am using .padding but this does not seem ideal at all. Or is this really the only way?
var body: some View {
ScrollView(.vertical) {
LazyVGrid(
columns: columns,
alignment: .center,
spacing: 3,
pinnedViews: [.sectionHeaders, .sectionFooters]) {
Section(header:Text("GRID 1").font(.title).bold().padding(.top, 10.0)) {
ForEach(0...9, id: \.self) {
index in Color(UIColor.random)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 75, maxHeight: .infinity)
}
}
Section(header:Text("GRID 2").font(.title).bold().padding(.top, 50.0)) {
ForEach(10...20, id: \.self) {
index in Color(UIColor.random)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 75, maxHeight: .infinity)
}
}
}
}
}

Answer 1

If I understand your question correctly, one way to add vertical space between sections in a grid is to add a spacer with an explicit length (e.g. Spacer(minLength: 45)) inside the grid.
struct ContentView: View {
let gridItemLayout = [GridItem(.adaptive(minimum: 50, maximum: 50))]
var body: some View {
List {
LazyVGrid(columns: gridItemLayout, spacing: 25) {
SectionView()
Spacer(minLength: 45) <-------- VERTICAL SPACE BETWEEN SECTIONS
SectionView()
}
}
}
}
struct SectionView: View {
var body: some View {
Section() {
Color.red.frame(height: 50)
Color.black.frame(height: 50)
Color.green.frame(height: 50)
Color.blue.frame(height: 50)
Color.orange.frame(height: 50)
Color.pink.frame(height: 50)
Color.gray.frame(height: 50)
}
}
}