SwiftUI HitTesting cannot be disabled in ZStack

Question

Created Dec ’20

Replies 2

Boosts 0

Views 1.4k

Participants 2

When using the following layout, the Rectangle still receives touch events stopping the underlying content or scroll view from receiving interaction. I believe this might be a SwiftUI bug?

Code Block swiftZStack(alignment: .bottom) {
	Color.blue
	
	ScrollView {
		VStack(alignment: .leading) {
			Text("Text")
			Text("Text")
			Button()
		}
	}
	Rectangle()
        .fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.red, .clear]), startPoint: .bottom, endPoint: .top))
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 150)
		.allowsHitTesting(false)
}

Boost

Answer 1

OOPer OP

Dec ’20

As far as I tried your code, both the button and the scroll view works under the Rectangle.
(I needed to modify some parts to make the button visible and the content enough to scroll.)

Your issue may or may not be a bug of SwiftUI.
Anyway, you should better show enough code to reproduce the issue.

0

Answer 2

wtpalexander OP

Dec ’20

@OOPer - Apologies, I simplified my code for posting here and must have removed too much. I've just tried the following code:

Code Block swiftstruct Test: View {
    @State var toggle: Bool = false
    var body: some View {
        ZStack(alignment: .bottom) {
            ScrollView(.vertical) {
                VStack(alignment: .leading) {
                    VStack(alignment: .leading) {
                        Text("A Really long layout with lots of text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                    }
                    VStack {
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                    }
                    VStack {
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                    }
                    VStack {
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                    }
                    VStack {
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                        Text("Text")
                    }
                    Toggle("Test toggle", isOn: $toggle)
                    Button(action: {
                        print("Tapped")
                    }, label: {
                        Text("Tap")
                    })
                }
            }
            Rectangle()
                .fill(LinearGradient(gradient: Gradient(colors: [Color.red, .clear]), startPoint: .bottom, endPoint: .top))
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 150)
                .allowsHitTesting(false)
        }
    }
}

When I run this in the preview window a scroll cannot be initiated in the scroll view when started on the rectangle with a gradient. Taps on the button behind appear to work however a toggle cannot be toggled?

0