SwiftUI中ScrollView添加遮罩overlay后阻断滚动该如何解决？

解决方案 #

你遇到的交互拦截问题有两种可行修复方式：

方案1：修复现有代码的交互逻辑

allowsHitTesting(false)未生效是因为修饰符加在了GeometryReader外层，内部填充的Rectangle默认仍会响应交互，同时需要显式声明遮罩无点击区域，修改如下：

.overlay(
    GeometryReader{geo in
        Rectangle().foregroundColor(Color(UIColor.systemBackground))
            .mask(
                HoleShapeMask(
                    in: geo.frame(in:.local)).fill(Color(UIColor.systemBackground),style: FillStyle(eoFill: true))
            )
            // 将交互修饰符移到内部视图上
            .allowsHitTesting(false)
            // 显式声明该视图无有效点击区域
            .contentShape(Path())
    }
)

方案2：适配滚动指示器在屏幕边缘的优化实现

你原有代码限制了ScrollView宽度为屏幕的90%，无法实现滚动指示器在屏幕边缘的需求，调整后的完整实现如下：

struct ContentView: View{
    let width: CGFloat = UIScreen.main.bounds.width
    var body: some View{
        ScrollView{
            ForEach(0..<10){i in
                Text("Hello")
                    .frame(width: width*0.9,height: 50)
                    .background(Rectangle().fill(Color(UIColor.systemGray6)))
            }
            .frame(width: width)
        }
        // ScrollView占满全屏宽度，保证滚动指示器在屏幕边缘
        .frame(width: width, height: 300)
        .overlay(
            GeometryReader{geo in
                Rectangle()
                    .foregroundColor(Color(UIColor.systemBackground))
                    .mask(
                        HoleShapeMask(
                            // 居中镂空90%宽度的圆角内容区域
                            in: CGRect(x: width*0.05, y: 0, width: width*0.9, height: geo.size.height)
                        )
                        .fill(style: FillStyle(eoFill: true))
                    )
                    .allowsHitTesting(false)
                    .contentShape(Path())
            }
        )
    }
}

func HoleShapeMask(in rect: CGRect) -> Path {
    let fullMaskRect = UIScreen.main.bounds
    var shape = Rectangle().path(in: CGRect(origin: .zero, size: fullMaskRect.size))
    shape.addPath(RoundedRectangle(cornerRadius: 10).path(in: rect))
    return shape
}

该实现可同时满足三个需求：

• 滚动内容仅在可见区域显示圆角
• 内容两侧预留10%的边距
• 滚动指示器固定在屏幕最右侧边缘

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