ios – Show button below the list or at the bottom of the view


I have a view which has a list and a button. The list could be short or long since the values within it are dynamic.

Incase of short list, I wish to display the button below the list, but incase of long scrollable list, the button should be bottom of the view i.e. the button should always be visible. I tried setting button as the footer of the section which works fine for a short list, but when list is long, button is hidden and user has to scroll to get to it.

How can I display button at the bottom of the screen when list is long?

Current code:

import SwiftUI
import Foundation

struct ContentView: View {
    
    let shortList: [String] = ["One", "Two", "Three", "Four", "Five"]
    let longList: [String] = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen", "Twenty", "Twenty One", "Twenty Two"]
    
    @State var showSheet: Bool = false
    var body: some View {
        VStack {
            List {
                Section {
                    ForEach(longList, id: \.hashValue) { value in
                        Text(value).font(.body)
                    }
                } header: {
                    Rectangle().frame(height:0)
                }
                
                Section(footer: self.resetButton) {
                    EmptyView().frame(height:0)
                }
            }
        }
        .sheet(isPresented: $showSheet) { SheetA() }
    }
    
    private var resetButton: some View {
        VStack {
            Button {
               // Do something
            } label: {
                Text("Reset").font(.body).bold().padding(.trailing, 5.0)
            }
            .frame(width: UIScreen.main.bounds.width - 50.0, height: 30.0)
            .padding(8.0)
            .background(Color.mint)
            .foregroundColor(Color.black)
            .font(.headline)
        }
    }
}

Short List
Long List

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img