3

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":

enter image description here

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")
                }
        }
    }
}

enter image description here

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")
                }
        }
    }
}

enter image description here

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.

3
  • It is not clear how it should look if there would be several such items sections and "Updated" goes out of visible area, then we scroll to bottom and ...?
    – Asperi
    Commented Feb 11, 2021 at 17:07
  • scrolling to the bottom it would be above the tab bars. in auto layout, would pin to the bottom safe area with a high priority and pin below the last section with a lower priority I believe
    – TruMan1
    Commented Feb 11, 2021 at 18:53
  • I'm beginning to think this can't be done in SwiftUI. maybe I should set it as a sticky footer unless the list is bigger than the screen height. sounding messy
    – TruMan1
    Commented Feb 11, 2021 at 21:59

2 Answers 2

0

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")
                }
        }
    }
}
9
  • I tried this but the Text view floats and the List scroll is only part of the screen
    – TruMan1
    Commented Feb 11, 2021 at 15:35
  • btw if I wanted to float, .overlay works better for this. But I'm trying to make this view at the bottom of the List view no matter how short or long it is (but not float it while scrolling)
    – TruMan1
    Commented Feb 11, 2021 at 15:38
  • @TruMan1 I understand now what you need. But what should happen if you scroll the list? Should the footer slide down and hide? Commented Feb 11, 2021 at 15:40
  • if the list is too long, the "Updated at" would be off the screen and at the bottom. The user won't see it until they finish scrolling to the bottom
    – TruMan1
    Commented Feb 11, 2021 at 15:45
  • now that I think about it, if the list is too long, it would behave just like adding a Section footer to the last section. But if its too short, that's when there'd be a spacer in between
    – TruMan1
    Commented Feb 11, 2021 at 15:47
0

You can achive that using GeometryReader, here you have a demo:

import SwiftUI

struct ContentView: View {
    
    @State private var list: [Int] = [0,1,2,3,4,5]
    
    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                VStack(spacing: 0) {
                    ForEach(list, id: \.self) { index in
                        Button(action: {
                            list.removeAll(where: { $0 == index})
                        }, label: {
                            Text("Item #\(index)")
                                .padding()
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .border(.gray, width: 0.2)
                        })
                    }
                    
                    Spacer()
                    
                    
                    bottomView
                }
                .frame(minHeight: geometry.size.height)
            }
        }
    }
    
    private var bottomView: some View {
        HStack {
            Spacer()
            Button(action: {
                list.append(list.count + 1)
            }, label: {
                Text("Fixed Bottom Section")
                    .padding()
            })
            Spacer()
        }
        .background(Color.gray.opacity(0.2))
        
    }
}

#Preview {
    ContentView()
}

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.