SwiftUI: How to provide TableFooterView in List

Question

I would like to provide a TableFooterView in SwiftUI in my List to show the copyright and version of the app.

In UIKit, I can achieve this by the following code:

tableView.tableFooterView = SomeFooterView(frame: .init(x: .zero, y: .zero, width: UIScreen.main.bounds.width, height: 80))

Results:

However in SwiftUI List, I can only achieve this in Section(footer: _). My alternative approach like so:

    var body: some View {
        NavigationView {
            Group {
                VStack {
                    List {
                            
                       //Lists code...
                            
                    }
                        
                    Text("© 2021 - \(getCurrentYear())")
                    Text("Version \(getVersion() ?? "")")
                }
            }
            .listStyle(InsetGroupedListStyle())
            .navigationBarTitle("Settings")
        }
    }

But this is the result I achieved:

How can I achieve the exact same result as in table.tableFooterView?

user_14351818 · Answer

Section(footer: _) seems like what you should be using... I don't know why you don't want to use it, but this works:

struct ContentView: View {
    var body: some View {
        
        NavigationView {
            List {
                
                Text("Your list code")
                
                Section(
                    footer:
                        VStack {
                            Text("© 2021")
                            Text("Version 1.0.0")
                        }
                        .frame(maxWidth: .infinity)
                ) { EmptyView() } /// show nothing for the title
            }
            .listStyle(InsetGroupedListStyle())
            .navigationBarTitle("Settings")
        }
    }
}

Result:

But if you absolutely can't use Section(footer: _), you can just add your copyright text directly inside the List. To get rid of the default styling, you need to use a combination of:

listRowInsets(EdgeInsets()) to get rid of the insets
frame(maxWidth: .infinity, minHeight: 60) to make the content expand outwards (otherwise it will be tiny)
.background(Color(UIColor.systemGroupedBackground)) to make the background match the List's background.

struct ContentView: View {
    var body: some View {
        
        NavigationView {
            List {
                Text("Just put it inside the List!")
                
                VStack {
                    Text("© 2021")
                    Text("Version 1.0.0")
                }
                .listRowInsets(EdgeInsets())
                .frame(maxWidth: .infinity, minHeight: 60)
                .background(Color(UIColor.systemGroupedBackground))
            }
            .listStyle(InsetGroupedListStyle())
            .navigationBarTitle("Settings")
        }
    }
}

Result:

SwiftUI: How to provide TableFooterView in List

1 Answers