SwiftUI中如何让ScrollView指定区域不可滚动以点击下方Map

问题出在SwiftUI的视图默认会拦截点击事件——哪怕是透明区域，也会挡住下方的Map。下面给你两种简便的解决办法：

方法一：只让按钮响应点击，透明区域透传 #

直接修改SingleItemView，让外层VStack默认不接收点击，仅保留按钮的可点击性：

struct SingleItemView: View {
    @Binding var item: Item
    var body: some View {
        VStack {
            NormalButton(image: "person") {
                item.expanded.toggle()
            }
            .allowsHitTesting(true)

            if item.expanded {
                NormalButton(image: "house") {}
                .allowsHitTesting(true)
                NormalButton(image: "house") {}
                .allowsHitTesting(true)
                NormalButton(image: "house") {}
                .allowsHitTesting(true)
            }
        }
        .allowsHitTesting(false) // 整个VStack不响应点击，只有按钮能被点
    }
}

这样展开后的透明区域会把点击事件直接传给下面的Map，按钮本身的功能不受影响。

方法二：限制ScrollView的点击范围 #

修改NewRoutePanel里的ScrollView，给它固定高度和蓝色条一致，让展开的视图超出ScrollView的范围，这部分超出的区域就不会被ScrollView拦截点击：

struct NewRoutePanel: View {
    @State var itemArray: [Item] = [Item(), Item(), Item(), Item(), Item(), Item()]
    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .foregroundColor(Color(.blue))
                    .frame(width: UIScreen.main.bounds.width, height: 75)

                ScrollView(.horizontal) {
                    HStack {
                        ForEach(itemArray.indices, id: \.self) { idx in
                            SingleItemView(item: $itemArray[idx])
                        }
                    }
                }
                .frame(height: 75) // 固定ScrollView高度和蓝色条相同
                .padding()
            }
            .frame(width: UIScreen.main.bounds.width)
            Spacer().frame(minHeight: 600)
        }
    }
}

这种方法更简洁，ScrollView的水平滚动功能正常，展开的视图超出部分自动透传点击到Map。

你可以根据自己的需求选其中一种，两种结合用也没问题，都能解决透明区域遮挡Map的问题。

内容的提问来源于stack exchange，提问作者Hasenburg