I would like to allow the SwiftUI List
to scroll all the way up to the place where header of the last Section
will be at the top of the List
view. I know that I could use GeometryReader
to calculate height of the List
and by knowing the height
of each list cell I could calculate how much empty space I should add at the bottom of the list to push it up. The problem is that if cells will for example expand or have flexible size, then it won't work. I was wondering if there is maybe some modifier that I don't know about or some more "flexible" way to do that?
This is the code for the List
import SwiftUI
struct ListSections: View {
var body: some View {
List {
Section(header: Text("Header 1")) {
ForEach((0...10), id: \.self) { index in
Text("item \(index)")
}
}
Section(header: Text("Header 2")) {
ForEach((0...12), id: \.self) { index in
Text("item \(index)")
}
}
}
}
}
On the image below you can see on the left how far I can scroll by default and on the right how far I would like to be able to scroll.
There are two options here: Option 1 (preferred way) Just adding a bottom padding to the last Section:
struct ListSections: View {
var body: some View {
List {
Section(header: Text("Header 1")) {
ForEach((0...10), id: \.self) { index in
Text("item \(index)")
}
}
Section(header: Text("Header 2")) {
ForEach((0...12), id: \.self) { index in
Text("item \(index)")
}
}
.padding(.bottom, 300)
}
}
}
Option 2: Adding a View after the last section inside your List will do the trick. For instance I used a Color view.
Your code should look like:
struct ListSections: View {
var body: some View {
List {
Section(header: Text("Header 1")) {
ForEach((0...10), id: \.self) { index in
Text("item \(index)")
}
}
Section(header: Text("Header 2")) {
ForEach((0...12), id: \.self) { index in
Text("item \(index)")
}
}
Color(.clear)
.frame(height: 300)
}
}
}