How to make a clear SwiftUI view block the scrollview underneath it

Question

So I have a ZStack that contains a ScrollView on the bottom and an HStack that's aligned at the top. It looks something like this:

ZStack {
  ScrollView {
    //Content
  }
  VStack {
    HStack {
      Spacer()
      Circle()
        .frame(width: 30, height: 30)
      Spacer()
    }
    Spacer()
  }
}

Now, I want that HStack to block any interaction with the ScrollView beneath it. I've noticed that when I set the background on the HStack to a non-clear color, it behaves as I'd like it to. However, if the background is clear, then the touches go through the HStack and interact with the ScrollView beneath it. I've also tried using .allowsHitTesting(true) on the HStack with no luck.

Any help is much appreciated!

https://i.stack.imgur.com/5Jzby.png

Answer 1

"...I've noticed that when I set the background on the HStack to a non-clear color, it behaves as I'd like it to.", then you could use Color.white.opacity(0.001) instead of Color.clear or non-clear color

Answer 2

You can easily accomplish this by putting it in a VStack instead of a ZStack. The touches will be ignored as it's above the ScrollView. You can also have a look at .layoutPriority(), it may also be useful. Documentation is here.

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Spacer()
                Circle()
                    .foregroundColor(Color.blue)
                    .frame(width: 30, height: 30)
                Spacer()
            }
            .padding()
            // or this does the same thing as the HStack two spacers
            /*
            Circle()
                .foregroundColor(Color.blue)
                .frame(width: 30, height: 30)
                .frame(minWidth: 0, maxWidth: .infinity)
             */
            Spacer()
            ScrollView {
                ForEach(1..<11) { value in
                    Text("\(value)")
                }
            }
        }
    }
}