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()toTabView.tabViewStyle(.page)orScrollViewbut that would makeNavigationViewhave 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()
}
}