ios – How to make sure views respect Protected Space in SwiftUI whereas mother or father view ignores it effectively in TabView?

I am creating an app with a person interface much like TikTok, that includes a number of tabs, together with a full display screen vertical scroller tab. On this scroller view, I need the background to increase past the secure space, overlaying the complete display screen. Nonetheless, I additionally want some overlaid views to remain throughout the secure space.

At present, I am utilizing GeometryReader for this format. The problem arises once I change to the second tab for the primary time. The background appears to rebuild, which isn’t very best for efficiency, particularly if the background is a video.

For instance, I’ve created a simplified model of this difficulty. It includes a background with a randomly generated coloration and a blue field representing the secure space content material. The issue is noticeable when the background coloration adjustments upon swiping to the subsequent tab, indicating that the view has been rebuilt(I assume). How can I forestall this view from rebuilding when switching tabs, or is there a extra environment friendly workaround for this state of affairs?

import SwiftUI

struct ContentView: View {
    @State non-public var selectedIndex: Int = 0
    
    var physique: some View {
        ZStack(alignment: .backside) {
            TabView(choice: $selectedIndex) {
                PageView()
                Textual content("2nd tab")
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .by no means))
            .edgesIgnoringSafeArea(.all)
        }
    }
}

struct PageView: View {
    @State non-public var paddingValue: EdgeInsets = EdgeInsets()
    
    var physique: some View {
        GeometryReader { geometry in
            ScrollView {
                LazyVStack(spacing: 0){
                    ForEach(0..<10){submit in
                        Rectangle()
                            .fill(randomColor())
                            .containerRelativeFrame ([.horizontal, .vertical])
                            .overlay {
                                SafeSectionView()
                                    .padding(paddingValue)
                            }
                    }
                }
                .scrollTargetLayout()
            }
            .scrollIndicators(.hidden)
            .scrollTargetBehavior(.paging)
            .ignoresSafeArea()
            .onAppear {
                if paddingValue == EdgeInsets() {
                    paddingValue = geometry.safeAreaInsets
                }
            }
        }
    }
    
    func randomColor() -> Coloration {
        return Coloration(
            crimson: Double.random(in: 0...1),
            inexperienced: Double.random(in: 0...1),
            blue: Double.random(in: 0...1)
        )
    }
}

struct SafeSectionView: View {
    var physique: some View {
        Rectangle()
            .fill(.blue)
    }
}

#Preview {
    ContentView()
}