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.
Selecting any option will automatically load the page