Hi everyone, I have a file with a navigation stack and i want the background of it to be a blurred image however there's like a line dividing the body of the navigation stack and the navigation bar where the image isn't being blurred, is there any way to get rid of this and make it so the blurred image background connects the two? i've already tried changing the appearance of the navigation bar when it's initialized. I also have my code below for reference:
var body: some View {
NavigationStack {
ZStack {
Image("HomeBKG") // this is the background image
.resizable()
.scaledToFill()
.ignoresSafeArea()
VisualEffectBlur(effect: UIBlurEffect(style: .systemMaterial)) // this is what i used to blur the image
.ignoresSafeArea()
ScrollView {
ColorManager.bkgColor
.ignoresSafeArea()
VStack {
Text("Recommended")
.foregroundStyle(.primary)
.font(.headline)
.padding()
RoundedRectangle(cornerRadius: 15)
.frame(width: 300, height:200)
.foregroundStyle(Color(UIColor.systemBackground))
.shadow(color: .primary.opacity(1), radius: 10)
Spacer()
Text("News")
.foregroundStyle(.primary)
.font(.headline)
.padding()
RoundedRectangle(cornerRadius: 15)
.frame(width: 300, height:200)
.foregroundStyle(Color(UIColor.systemBackground))
.shadow(color: .primary.opacity(1), radius: 10)
Text("Exchange Rates")
.foregroundStyle(.primary)
.font(.headline)
.padding()
RoundedRectangle(cornerRadius: 15)
.frame(width: 300, height:200)
.foregroundStyle(Color(UIColor.systemBackground))
.shadow(color: .primary.opacity(1), radius: 10)
}
} // end zstack
}
.navigationTitle("Hub")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
NavigationLink(destination: UVSettings()) {
Image(systemName: "gearshape.fill")
}
}
}
} // end navigation stack
}
}`
```