In the iOS app that I'm making, I use a NavigationLink to go from my main view to another one. I want a button present in both views' navigation bars, which will overlay a blur on top of all of the content in the view. In the main view, the blur works just fine, but on the second view, the Navigation Bar and the Navigation Bar Title do not get blurred and stay on top of the blur view.
How can I make the Navigation view appear under the blur in the second view?
Main view:
var body: some View {
ZStack {
NavigationView {
ScrollView(.vertical) {
. . .
}
.navigationBarItems(
leading: Button(action: {
showBlurView.toggle()
}) {
Text("Show blur view")
}
),
trailing: Button(action: {
NavigationLink(destination: SecondView()) {
Text("2nd view")
}
}
)
}
BlurEffectView(style: .systemThinMaterial)
.edgesIgnoringSafeArea(.all)
.hidden(showBlurView == true ? false : true)
}
}
Second View:
var body: some View {
ZStack {
VStack {
...
}.navigationBarTitle("Second View")
BlurEffectView(style: .systemThinMaterial)
.edgesIgnoringSafeArea(.all)
.hidden(showBlurView == true ? false : true)
}
}
And the code for the BlurEffectView:
struct BlurEffectView: UIViewRepresentable {
let style: UIBlurEffect.Style = .systemMaterial
func makeUIView(context: Context) -> UIVisualEffectView {
return UIVisualEffectView(effect: UIBlurEffect(style: style))
}
func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
uiView.effect = UIBlurEffect(style: style)
}
}