Given a List
with insetGrouped
listStyle
, how can I fill the contents of a Section
such that no padding is visible?
In the follow example, I have a Rectangle
overlaid with a Button
. The Rectangle
(in mint) is automatically inset within Section
.
Problem: However, I want the Rectangle
(or any content for that matter) to fill the entire space of the Section
, instead of being inset. There should be no white padding around the mint rectangle.
Supplementary/fallback question: failing the ability to remove that inset from the Section
, how can I mix and match my own views with an .insetGrouped
List
? e.g. to provide my own hero view, which won’t be subject to the Section
‘s insetting behaviour?
(I’ve been having to use a ScrollView to do this so far, but that involves a lot of rebuilding default iOS behaviours/looks.)
struct InsetGroupTestView: View {
var body: some View {
List {
// Content that requires no padding/inset within the Section.
// i.e. needs to expand to fill the entire Section.
Section("Foo") {
Rectangle()
.foregroundStyle(.mint)
.frame(height: 100)
.overlay {
Button("Press me") { }
.buttonStyle(.borderedProminent)
.buttonBorderShape(.roundedRectangle)
}
}
.buttonStyle(.plain) // Remove tap-highlighting from entire cell.
// Content that needs system inset/padding.
Section("Bar") {
ForEach(1..<5) { index in
NavigationLink(destination: Text("Item #(index)")) {
Text("Item #(index)")
}
}
}
}
.listStyle(.insetGrouped)
.navigationTitle("Inset Group Test")
.navigationBarTitleDisplayMode(.inline)
.scrollIndicators(.hidden)
}
}
#Preview {
NavigationStack {
InsetGroupTestView()
}
}