9

I am trying to implement a sticky footer in a List View in SwiftUI

It doesn't seem to operate the same as the header per say. This is an example of a sticky header implementation

     List {
      ForEach(0..<10) { index in
        Section(header: Text("Hello")) {
          ForEach(0..<2) { index2 in
            VStack {
              Rectangle().frame(height: 600).backgroundColor(Color.blue)
            }
          }
        }.listRowInsets(EdgeInsets())
      }
    }

This above gives a sticky header situation. Although, once I change Section(header: ... to Section(footer:... it doesn't seem to be sticky anymore, it's simply places at the end of the row.

A more explicit reference

 List {
  ForEach(0..<10) { index in
    Section(footer: Text("Hello")) {
      ForEach(0..<2) { index2 in
        VStack {
          Rectangle().frame(height: 600).backgroundColor(Color.blue)
        }
      }
    }.listRowInsets(EdgeInsets())
  }
}

Does anyone have any solutions for this?

6
  • Updated question for a more explicit reference.
    – Johno2110
    Commented Jun 20, 2020 at 11:05
  • Have you got any solution?
    – Zeona
    Commented Jun 22, 2020 at 15:12
  • Haven't got a solution as of yet, I did find a library github.com/zenangst/Blueprints which has a sticky footer, but this is in UI-Kit not SwiftUI. Other then that not much progress
    – Johno2110
    Commented Jun 23, 2020 at 3:56
  • Ok..Thank you :)
    – Zeona
    Commented Jun 23, 2020 at 4:18
  • 1
    @Zeona with iOS 14 we can use Lazy... to achieve this. Please see answer for more
    – Johno2110
    Commented Jul 9, 2020 at 6:47

3 Answers 3

11

Swift 5 / 2023 / iOS 16

List {
...
}
.toolbar {
  ToolbarItemGroup(placement: .bottomBar) {
     Text("App iOS Version 1.0.0 (xyz)")
         .font(.footnote)
         .foregroundColor(.secondary)
         .frame(maxWidth: .infinity)
         .textSelection(.enabled)
     }
}

enter image description here

1
  • It had exactly the behavior I wanted, thank you. Commented May 7 at 12:56
6

With the latest on SwiftUI (2) we now have access to a few more API's

For starters we can use a LazyVStack with a ScrollView to give us pretty good performance, we can then use the pinnedViews API to specify in an array which supplementary view we want to pin or make sticky. We can then use the Section view which wraps our content and specify either a footer or header.

** This code is working as of Xcode beta 2 **

As for using this in a List I'm not too sure, will be interesting to see the performance with List vs Lazy...

struct ContentView: View {
  var body: some View {
    ScrollView {
      LazyVStack(spacing: 10, pinnedViews: [.sectionFooters]) {
        ForEach(0..<20, id: \.self) { index in
          Section(footer: FooterView(index: index)) {
            ForEach(0..<6) { _ in
              Rectangle().fill(Color.red).frame(height: 100).id(UUID())
            }
          }
        }
      }
    }
  }
}

struct FooterView: View {
  
  let index: Int
  
  var body: some View {
    VStack {
      Text("Footer \(index)").padding(5)
    }.background(RoundedRectangle(cornerRadius: 4.0).foregroundColor(.green))
  }
}


struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

1

You can use overlay on the List:

struct ContentView: View {
    @State private var selectedTab = 0

    var body: some View {
        TabView(selection: $selectedTab) {
            VStack {
                List {
                    ForEach(0..<20, id: \.self) { _ in
                        Section {
                            Text("Item 1")
                            Text("Item 2")
                            Text("Item 3")
                        }
                    }
                }
                .listStyle(InsetGroupedListStyle())
                .overlay(
                    VStack {
                        Spacer()
                        Text("Updated at: 5:26 AM")
                            .font(.footnote)
                            .foregroundColor(.secondary)
                            .frame(maxWidth: .infinity)
                    }
                )
            }
            .tabItem {
                Label("First", systemImage: "alarm")
            }
            Text("Content 2")
                .tabItem {
                    Label("Second", systemImage: "calendar")
                }
        }
    }
}
1

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.