SwiftUI - TabView - PageView Fullscreen Problem

Question

I hope somebody can help me.

I want to make a page wise scrolling through unique designed Views.(in .swift-Files) Nearly everything worked like intended with the Tabview. I do not get a clean fullscreen for my Views.

First problem: When I swipe on my first page to the right or on my last Page to the left I get shown the background of my TabView in shiny white. Shiny TabView Background I tried something with an infinite frame in a SeiteX.View but found only other Problems and nothing I intended.

Next problem: I have to make my TabView to ignore the safe areas. Otherwise I get TabView with safeareas But when I do this also my Views inside the TabView ignore the safe areas too. Look at the tale of the Airplane. Inner Views ignoring the safe areas too Can I avoid this?

My app.swift

import SwiftUI

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
                ZStack {
                    TabView {
                        Seite1()
                        Seite2()
                        Seite3()
                    }
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) //ohne Index-Punkte
                    .ignoresSafeArea()
                }
            }
        }
    }

My .swift-File for one example Page

import SwiftUI

struct Seite2: View {
    var body: some View {
            ZStack {
                Color.black.ignoresSafeArea()
                
                HStack(spacing: 50){
                    Image("Fly2")
                        .resizable()
                        .scaledToFit()
                    Text("Test-Text dfvfb vtgbhzbnzh tbhbzhbnzh bzhzhb zbzhbzhbn zhbzhnbz zbzhbnznb ztbzhnbzjn zbz zhbbn zbnzn ")
                        .font(.largeTitle)

                }
                .padding()

            }
        }
    }

struct Seite2_Previews: PreviewProvider {
    static var previews: some View {
        Seite1()
    }
}

What I tried: putting the ignore safearea at nearly every possible position. frames with georeader and infinity in the HStack and ZStack. Trying .overlay in ZStack. A Backgroundlayer with ZStack in many places.

What I hope to get: I need as simple as possible clean SwiftUI solution.

Answer 1

Second try after new information :).
Now it has 2 backgrounds, one general black one, and one individual color for the views.

struct ContentView: View {
    var body: some View {
             TabView {
                 Seite(page: 1)
                 Seite(page: 2)
                 Seite(page: 3)
             }
             .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
             .ignoresSafeArea()
             .background(Color.black.ignoresSafeArea()) // general black background
    }
}

struct Seite: View {
    
    let colors: [Color] = [.blue, .green, .yellow, .orange, .red, .teal, .mint]
    
    let page: Int
    var body: some View {
        HStack(spacing: 50){
            Image("plane\(page)")
                .resizable()
                .scaledToFit()
            Text("Test-Text dfvfb vtgbhzbnzh tbhbzhbnzh bzhzhb zbzhbzhbn zhbzhnbz zbzhbnznb ztbzhnbzjn zbz zhbbn zbnzn ")
                .font(.largeTitle)
            
        }
//        .border(.red, width: 2) // to show inner frame
        .padding()
        .padding(.horizontal)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(colors.randomElement()!.ignoresSafeArea()) // individual view background

    }
}

Answer 2

You don't need all theses ZStack. Just give your TabView a .background and IN the background .ignoresSafeArea.

So SwiftUI layouts all elements respecting the safe areas, except for the color in the background.

struct ContentView: View {
    var body: some View {
             TabView {
                 Seite(page: 1)
                 Seite(page: 2)
                 Seite(page: 3)
             }
             .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
             .background(Color.teal.ignoresSafeArea()) // here
    }
}

struct Seite: View {
    let page: Int
    var body: some View {
        HStack(spacing: 50){
            Image("plane\(page)")
                .resizable()
                .scaledToFit()
            Text("Test-Text dfvfb vtgbhzbnzh tbhbzhbnzh bzhzhb zbzhbzhbn zhbzhnbz zbzhbnznb ztbzhnbzjn zbz zhbbn zbnzn ")
                .font(.largeTitle)
            
        }
        .padding()
    }
}