In my app, i am trying to display: SegmentedPicker
on top of the screen, Then List
, Then a simple button on bottom-right of the screen using safeAreaInset
, and then a tabBar using TabView
My problem is that at bottom of the screen, List
and TabView
is getting over-lapped each other. Attached Screenshot at the end
Following is the code for my TabView
struct ContentView: View {
var body: some View {
TabView {
NavigationStack {
FirstView()
}
.tabItem {
Label("First", systemImage: "pencil")
}
SecondView()
.tabItem {
Label("Second", systemImage: "pencil.circle.fill")
}
}
}
}
Following is the code for my 1st TabView.
Look's like some issue with my Picker
which is inside the VStack
. Because if I remove the Picker
, I don't have any issue.
struct FirstView: View {
var firstViewPicker = ["one", "two", "three"]
@State private var segmentSelection = 0
var body: some View {
VStack {
//MARK: - Picker related stuff
Picker("", selection: $segmentSelection) {
ForEach(0..<firstViewPicker.count, id: \.self) { id in
Text(firstViewPicker[id])
}
}
.pickerStyle(.segmented)
.padding()
List {
ForEach(0..<40, id: \.self) { id in
Text("Row Item #\(id)")
}
}
.listStyle(.grouped)
}
.navigationTitle("Home")
.navigationBarTitleDisplayMode(.inline)
.safeAreaInset(edge: .bottom, alignment: .trailing) {
Button(action: {
print("Tapped")
}, label: {
Image(systemName: "trash.circle.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(.white, .brown)
.font(.system(size: 50))
})
.padding()
.shadow(color: .gray, radius: 5, x: 0, y: 0)
}
}
}
Following is the code for my 2nd TabView
struct SecondView: View {
var body: some View {
Text("Hello, 2nd world!")
}
}
Following is the screenshot where I am getting an over-lapping issue of List
and TabView
Am I doing something wrong here? how can we make this work? Kindly help
FYI: I am using macOS 13.3, Xcode 14.3, Simulator 14 Pro Max with iOS 16.4
FYI: Just noticed that unable to reproduce on iPhone- 12, iPhone Simulator-14. And can able to reproduce on iPhone Simulator -14 pro, iPhone Simulator-14 pro max
Yes because .tabitem
is getting overlapped by the Navigation stack itself. You have to provide padding there. Tried its working for me. Tested on Xcode 14.3
struct ContentView: View {
var body: some View {
TabView {
NavigationStack {
FirstView()
}.padding()
.tabItem {
Label("First", systemImage: "pencil")
}
SecondView()
.tabItem {
Label("Second", systemImage: "pencil.circle.fill")
}
}
}
}