SwiftUI: positioning a Button below a List

Question

One of my views has a grouped List, and I like to place a button below the final row. Here's the code:

var body: some View {
    VStack() {
        List {
           Text("Hello World")
           Text("Hello World")
           Text("Hello World")
           Text("Hello World")
        }
        .listStyle(GroupedListStyle())

        Button("Button") {}
    }
    .navigationBarTitle("Hello World", displayMode: .inline)
}

Problem: the button always shows up at the bottom of the screen. I tried adding spacers, adding a spacing modifier to the VStack, but the button is always at the bottom:

Instead, I'd like the button to be below the list with some spacing.

How can I do that?

koen · Accepted Answer · 2020-08-20T16:29:25.900

Of course, I found a solution pretty quickly after posting the question. I added sections to the list and then put the button in the footer of the second section. I also removed the no longer needed VStack.

var body: some View {
    List {
        Section {
           Text("Hello World")
           Text("Hello World")
           Text("Hello World")
           Text("Hello World")
        }
        
        Section(footer:
            HStack(alignment: .center) {
                Spacer()

                Button("Button") {
                    print("tapped button")
                }
                Spacer()

        }) {
            EmptyView()
        }
    }
    .listStyle(GroupedListStyle())
    .navigationBarTitle("Hello World", displayMode: .inline)
}

Result:

SwiftUI: positioning a Button below a List

1 Answers1