SwiftUI TabView cut off blur effect when `.tabViewStyle(.page) `

Viewed 18

What I've encountered

When embed ScrollView in TabView.tabViewStyle(.page), the blur effects provided by NavigationView and TabView get cut off.

Is there any way to avoid this?


Why I ask this question

I can get a good blurring effect when using the NetNewsWire RSS reader, you can check the following screenshot.

Screenshot - NetNewsWire - PageView in TabView & NavigationView: Blur effects exist


What I've tried

  • I've tried add .ignoresSafeArea() to TabView.tabViewStyle(.page) or ScrollView but that would make NavigationView have a wierd behavior(always be transparent)

Screenshots

The two links below are screenshots of demo projects implemented using the two approaches:

Screenshot - Without PageView: Blur effects exist

Screenshot - With PageView: Blur effects get cut off


Code

The code for the demo project is as follows

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            WithPageView()
                .tabItem {
                    Label("With PageView", systemImage: "book")
                }
            WithoutPageView()
                .tabItem {
                    Label("Without PageView", systemImage: "doc.plaintext")
                }
        }
    }
}

struct WithoutPageView: View {
    var body: some View {
        NavigationView {
            ColorListView()
                .navigationTitle("Without PageView")
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct WithPageView: View {
    var body: some View {
        NavigationView {
            TabView {
                ColorListView()
                ColorListView()
            }
            .tabViewStyle(.page)
            .navigationTitle("With PageView")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct ColorListView: View {
    let colors: [Color] = [.black, .gray, .red, .orange, .yellow, .green, .mint, .blue, .purple]
    
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(colors, id: \.self) { color in
                    RoundedRectangle(cornerRadius: 20)
                        .fill(color)
                        .frame(height: 88)
                }
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
0 Answers
Related