首页 > 解决方案 > 带有掩码覆盖块滚动的 ScrollView

问题描述

在此示例中,我希望在 Scrollview 中的事物周围有一个cornerRadius,但仅在滚动框架周围。内容的两侧应该有一点空间。这就是我需要遮罩的原因,因为尽管侧面有空间,但我希望滚动指示器仍在屏幕边缘。当创建带有圆角矩形孔的矩形蒙版时,此框架会阻止滚动。我在 GeometryReader 之后放置了 allowishittesting(false),但它不起作用。有解决方法吗?

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)
        }
        .frame(width: width*0.9)
        .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)     //<--------------
        )
        .frame(height: 300)
    }
}


func HoleShapeMask(in rect: CGRect) -> Path {
    var shape = Rectangle().path(in: rect)
    shape.addPath(RoundedRectangle(cornerRadius: 10).path(in: rect))
    return shape
}

标签: swiftswiftui

解决方案


推荐阅读