How to add divider/border to footer in SwiftUI when using Section(footer: ) contructor

I'm trying to add a divider, or some sort of line/border, to differentiate the main content on the screen and the content I've added uisng Section(footer: ). Anytime I try to add some sort of divider in FooterView, it goes right under where the footer meets the main content. And I haven't been able to find anything that allows me to add a border to where I create the footer. I've attached an image that shows what I'm talking about. Here is the code I currently have for creating the footer which I use in ContentView():

https://i.stack.imgur.com/L3WyG.jpg

import SwiftUI

struct ContentView: View {
    @State var selectedView = 0
    var body: some View {
        Section(footer:
            FooterView(selectedView: $selectedView)
        )
        {
            ZStack {
                Color.blue
                VStack {
                    Spacer()
                    if selectedView == 0 {
                        Text("selected view = 0")
                    }
                    else {
                        Text("selected view = 1")
                    }
                }
            }.ignoresSafeArea(.all)
        }
    }
}

struct FooterView: View {
    let NoData = ["No Data displayed" : ["Nothing to show"]]
    @Binding var selectedView: Int
    
    //for checking screen is big enough to fit footer without padding
    @State var isLargeDevice: Bool = {
        if UIScreen.main.bounds.height > 800 {
            return true
        } else {
            return false
        }
    }()
    
    var body: some View {
        if isLargeDevice{
                VStack{
                    Divider()
                    HStack {
                        Button(action: {
                            // set selected view to 0 when the left button is clicked
                            selectedView = 0
                        }, label: {
                            Image(systemName: "fork.knife")
                                .font(.title2)
                                .foregroundColor(selectedView == 0 ? Color("NavBar color") : .primary)
                        }).frame(maxWidth: .infinity)

                        
                        Button(action: {
                            // set selected view to 1 when the right button is clicked
                            selectedView = 1
                        }, label: {
                            Image(systemName: "heart.fill")
                                .font(.title2)
                                .foregroundColor(selectedView == 1 ? Color("NavBar color") : .primary)
                        }).frame(maxWidth: .infinity)
                    }
                }
        }
        else {
            ZStack{
                VStack{
                    Divider()
                    HStack {
                        Button(action: {
                            // set selected view to 0 when the left button is clicked
                            selectedView = 0
                        }, label: {
                            Image(systemName: "fork.knife")
                                .font(.title2)
                                .foregroundColor(selectedView == 0 ? Color("NavBar color") : .primary)
                        }).frame(maxWidth: .infinity)

                        
                        Button(action: {
                            // set selected view to 1 when the right button is clicked
                            selectedView = 1
                        }, label: {
                            Image(systemName: "heart.fill")
                                .font(.title2)
                                .foregroundColor(selectedView == 1 ? Color("NavBar color") : .primary)
                        }).frame(maxWidth: .infinity)
                    }
                }
            }
            .padding()
        }
    }
}


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

I tried using .overlay, a super thin rectangle, divider(), the padding modifier to see if that would help, but none have worked so far.

  • Could you explain where the border is / should be on one of the images ?

Add a Comment

Accepted Reply

fixed the issue

  • A good practice on the forum is to tell how you fixed it. Other developers may have spent time to analyse your question, it is fair to explain how you solved.

Add a Comment

Replies

fixed the issue

  • A good practice on the forum is to tell how you fixed it. Other developers may have spent time to analyse your question, it is fair to explain how you solved.

Add a Comment