How to add footer view to a List in SwiftUI? - swiftui

Question

I'm trying to add a view to the bottom of a List while remaining in the safe zone. This is what I want to end up with, I'm referring to the "Updated: 5:26 AM":
What I tried is using the Section footer with a spacer, but that didn't work:
struct ContentView: View {
#State private var selectedTab = 0
var body: some View {
TabView(selection: $selectedTab) {
List {
Section {
Text("Item 1")
Text("Item 1")
Text("Item 1")
}
Section(
footer: VStack {
Spacer()
Text("Updated at: 5:26 AM")
.frame(maxWidth: .infinity)
}
) {
Text("Item 1")
Text("Item 1")
Text("Item 1")
}
}
.listStyle(InsetGroupedListStyle())
.tabItem {
Label("First", systemImage: "alarm")
}
Text("Content 2")
.tabItem {
Label("Second", systemImage: "calendar")
}
}
}
}
Then I tried a VStack as a section of of its own with a Spacer but no luck either:
struct ContentView: View {
#State private var selectedTab = 0
var body: some View {
TabView(selection: $selectedTab) {
List {
Section {
Text("Item 1")
Text("Item 1")
Text("Item 1")
}
Section {
Text("Item 1")
Text("Item 1")
Text("Item 1")
}
VStack {
Spacer()
Text("Updated at: 5:26 AM")
.font(.footnote)
.foregroundColor(.secondary)
.frame(maxWidth: .infinity)
}
.listRowBackground(Color(.systemGroupedBackground))
}
.listStyle(InsetGroupedListStyle())
.tabItem {
Label("First", systemImage: "alarm")
}
Text("Content 2")
.tabItem {
Label("Second", systemImage: "calendar")
}
}
}
}
How do I achieve this while also considering the List might scroll? I'm trying to tack it on the end of the list, not floating.

Answer 1

You can put both List and Text together in VStack with no spacing:
struct ContentView: View {
#State private var selectedTab = 0
var body: some View {
TabView(selection: $selectedTab) {
VStack(spacing: 0) {
List {
Section {
Text("Item 1")
Text("Item 1")
Text("Item 1")
}
Section {
Text("Item 1")
Text("Item 1")
Text("Item 1")
}
}
.listStyle(InsetGroupedListStyle())
Text("Updated at: 5:26 AM")
.font(.footnote)
.foregroundColor(.secondary)
.frame(maxWidth: .infinity)
.background(Color(.systemGroupedBackground))
}
.tabItem {
Label("First", systemImage: "alarm")
}
Text("Content 2")
.tabItem {
Label("Second", systemImage: "calendar")
}
}
}
}