The view below is pushed on NavigationStack. My main point is to have a top bar view, with a background expanding under nav bar, the top bar should have a shadow below, and below is a ScrollView with some content.
struct ContentView: View {
var body: some View {
VStack (spacing: 0) {
HStack {
Text("Title")
}
.frame(maxWidth: .infinity)
.padding()
.background(.red)
.compositingGroup()
.shadow(color: .black, radius: 5)
.zIndex(1)
ScrollView {
VStack(spacing: 0) {
ForEach((1...100), id: \.self) {
Text("\($0)…")
.frame(maxWidth: .infinity)
.background(.white)
}
}
}
}
}
}
To make the shadow, applied to title view, visible, I had to change the view zIndex to 1, so that the shadow is drawn above scroll view content. It works fine, but have a very weird side effect. With this code, when the scroll view starts scrolling, the color of the nav bar changes, see below.
If I don’t change the zIndex of the title bar, there is no effect like this, but the shadow is not visible.
