SwiftUI Add view below a list

Question

I have a list with some items.

Below the list I'd like to have to button to load more items. (As loading all items requires some user actions like entering a TAN, this should not be done automatically when the user scrolls to the end of the list, but only if he likes to.)

What I'd like to have is a view like this:

However, if I place the List and the Button in a VStack, the Button get always displayed at the bottom of the screen, not only when I scroll to the end of the List:

struct ContentView: View {
    
    private let items = Range(0...15).map { "Item " + String($0) }
    
    var body: some View {
        VStack {
            List(items, id: \.self) { item in
                Text(item)
            }
            
            HStack {
                Spacer()
                
                Button("Load more") { print("Load more items") }
                
                Spacer()
            }
        }
    }
}

If I add the Button to the List, the Button obviously gets displayed as a List item with a white background and without any space to the list:

struct ContentView: View {
    
    private let items = Range(0...15).map { "Item " + String($0) }
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
            
            HStack {
                Spacer()
                
                Button("Load more") { print("Load more items") }
                
                Spacer()
            }
        }.listStyle(GroupedListStyle())
    }
}

Is there any way to add a view that becomes visible when the user scrolls to the end of the List but that is not part of the List? (Or at least looks like being below the List and not part of it?)

user_12299030 · Answer

You should use second variant, but a bit tuned, like below (colors/spaces modify per your needs

var body: some View {
    List {
        ForEach(items, id: \.self) { item in
            Text(item)
        }

        HStack {
            Button("Load more") { print("Load more items") }
        }
        .listRowInsets(EdgeInsets())
        .frame(maxWidth: .infinity, minHeight: 60)
        .background(Color(UIColor.systemGroupedBackground))

    }.listStyle(GroupedListStyle())
}

SwiftUI Add view below a list

1 Answers