I updated my App to iOS and iPadOS 18. The app uses the TabBar, which was previously at the bottom of the screen, and a NavigationSplitView in one tab. The new TabBar is at the top and covers my toolbar buttons.
It seems as if the joint use of TabBar and NavigationSplitView is not wanted. Is there an alternative?
The problem can be reproduced with this swiftui code:
import SwiftUI
struct ContentView: View {
@State private var selectedTab: Tab = .A
enum Tab {
case A
case B
case C
case D
}
var body: some View {
TabView(selection: $selectedTab) {
NavigationSplitView {
Text("Sidebar")
} content: {
Text("Content")
.toolbar {
ToolbarItem(placement: .automatic) {
Button("Covered") {
}
}
}
} detail: {
Text("Detail")
}
.tabItem {
Label("Tab A", systemImage: "circle")
}
.tag(Tab.A)
.navigationTitle("Shops")
Text("B")
.tabItem {
Label("Tab B", systemImage: "square")
}
.tag(Tab.B)
Text("C")
.tabItem {
Label("Tab C", systemImage: "triangle")
}
.tag(Tab.C)
Text("D")
.tabItem {
Label("Tab C", systemImage: "diamond")
}
.tag(Tab.C)
}
}
}
The "Covered" Button cannot be seen because it is behind the tabbar.
This is fixed in iOS 18.4. I have implemented this workaround for version 18.0 to 18.3:
if #available(iOS 18.4, *) {
} else if #available(iOS 18, *),
UIDevice.current.userInterfaceIdiom == .pad,
horizontalSizeClass == .regular {
Rectangle()
.fill(.regularMaterial)
.frame(height: 50)
}