Hello,
I want to understand how listSectionSpacing with a custom CGFloat value works in SwiftUI.
According to the documentation, we can use different spacing between sections and If adjacent sections have different spacing value, the smaller value on the shared edge is used.
For example, if I have a:
- Section A with a listSectionSpacing of 10
- Section B with a listSectionSpacing of 200
- Section C with a listSectionSpacing of 20
- Section D with a listSectionSpacing of 0
I notice the spacing between the sections A+B and B+C is none of 10, 200 or 20. If the documentation is correct, shouldn't it be 10?
If I now have a:
- Section A with a listSectionSpacing of 200
- Section B with a listSectionSpacing of 200
- Section C with a listSectionSpacing of 200
- Section D with a listSectionSpacing of 0
I notice the spacing is never 200. Is the spacing capped?
Also, if I specify a header and footer, the spacing doesn't seem to be used at all. Thus the spacing is the same for all sections.
Is my understanding wrong and this API working as expected?
Or is that a bug in how the spacing is used?
I filed #FB13699952 few weeks ago.
Axel
struct ListSections: View {
@State private var header: Bool = false
@State private var footer: Bool = false
private let sections: [ListSection] = [
ListSection(position: "A", spacing: 200),
ListSection(position: "B", spacing: 200),
ListSection(position: "C", spacing: 200),
ListSection(position: "D", spacing: 0)
]
var body: some View {
VStack {
Toggle("Header", isOn: $header)
Toggle("Footer", isOn: $footer)
}
.padding(.horizontal)
List {
ForEach(sections) { section in
Section {
LabeledContent("Section \(section.position)", value: section.spacing.formatted())
} header: {
if header {
Text("Header \(section.position)")
.background(.red.opacity(0.3))
}
} footer: {
if footer {
Text("Footer \(section.position)")
.background(.green.opacity(0.3))
}
}
.listSectionSpacing(section.spacing)
}
}
}
}
#Preview {
ListSections()
}
