I’ve a TabView
that incorporates a customized PageView
which is merely a ScrollView
and that ScrollView
incorporates a number of some View
objects. The whole factor is wrapped in a NavigationStack
, and for each web page, there’s a new view added to my TabView
.
NavigationStack {
TabView(choice: $selectedPageIndex) {
ForEach(appConfig.pages.indices, id: .self) { index in
let web page = appConfig.pages[index]
PageView(topPadding: $navBarHeight,
bottomPadding: $tabBarHeight,
web page: web page)
.toolbar(.hidden, for: .tabBar)
.tag(index)
}
}
.overlay {
VStack {
navBar
.getHeight(peak: $navBarHeight)
Spacer()
TabBar(selectedPageIndex: $selectedPageIndex)
.getHeight(peak: $tabBarHeight)
}
}
I’ve this bizarre habits, the place if I modify the selectedPageIndex
a couple of occasions, the .toolbar
reappears. This occurs on the canvas, simulator, or actual gadget. As pictured right here.
The second downside I am working into is that I want this TabView
to be “Fullscreen” as I am utilizing it to host my pages, and in impact making a customized NavigationBar
and TabBar
with it is personal gadgets. Every time I try so as to add .ignoresSafeArea()
together with .tabViewStyle(.web page(indexDisplayMode: .by no means))
altering the selectedPageIndex
“Generally” works, however principally simply would not do something.
.ignoresSafeArea()
.tabViewStyle(.web page(indexDisplayMode: .by no means))
.overlay {
As a substitute now, the underlying view, is clipped in an surprising method, relatively than extending the total peak of the view. It is also current within the canvas, simulator, and actual gadget.
Oddly, every time I load it for the primary time, the whole lot renders as you’d anticipate, the underside is just not clipped. I can use drag gestures to swap the tab, and even choose the brand new tab with the TabBar, nevertheless instantly, the view jumps up and begins clipping, as if the body modified on it is personal. So as to repair it, I have to reset the view.