I have a ScrollView that slides over the header, but I need a button in the header tappable.
This is what it looks like:
I need the "Start" button tappable, but because the ScrollView is on top, it's not tappable. I tried playing with the zIndex but the scroll no longer occurred on top of the header.
This is the sample code:
struct ContentView: View {
@State private var isPresented = false
@State private var headerHeight: CGFloat = 0
var body: some View {
ZStack(alignment: .top) {
VStack {
Button("Start") {
isPresented = true
}
.padding()
.frame(maxWidth: .infinity)
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(16)
}
.padding(80)
.background(Color(.label).ignoresSafeArea())
.assign(heightTo: $headerHeight)
ScrollView(showsIndicators: false) {
Spacer()
.frame(height: headerHeight)
VStack {
ForEach((0...50), id: \.self) {
Text("Some text \($0)")
}
}
.padding()
.frame(maxWidth: .infinity)
.background(Color(.white))
}
}
.navigationBarHidden(true)
.alert(isPresented: $isPresented) {
Alert(title: Text("Button tapped"))
}
}
}
extension View {
/// Binds the height of the view to a property.
func assign(heightTo height: Binding<CGFloat>) -> some View {
background(
GeometryReader { geometry in
Color.clear.onAppear {
height.wrappedValue = geometry.size.height
}
}
)
}
}
How can this be achieved while making the scroll view slide over the header?
