swiftui - ScrollView 用白条截断部分视图（SwiftUI）

Question

我在我的 SwiftUI 项目中实现了 ScrollView，但它切断了视图的一部分：

它应该看起来如何：

代码：

struct ScrollingTest: View {
var body: some View {
    GeometryReader { geometry in
        ScrollView(.vertical, showsIndicators: false){
            VStack{
                ForEach(0..<2){ _ in
                    VStack {
                        Rectangle()
                            .foregroundColor(Color.white)
                            .frame(width: geometry.size.width - 50, height: 250)
                            .cornerRadius(25)
                            .shadow(radius: 5)
                    }.padding(.top, 15)
                }
            }.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
        }
        .offset(x: 20)
    }
}

我设置矩形的大小无关紧要，它总是被切断。 我能做些什么来解决这个问题？谢谢

Answer 1

它被滚动视图剪辑。这是可能的解决方案。使用 Xcode 12 / iOS 14 测试。

var body: some View {
    GeometryReader { geometry in
        ScrollView(.vertical, showsIndicators: false){
            VStack{
                ForEach(0..<2){ _ in
                    VStack {
                        Rectangle()
                            .foregroundColor(Color.white)
                            .frame(width: geometry.size.width - 50, height: 250)
                            .cornerRadius(25)
                            .shadow(radius: 5)
                    }.padding(.top, 15)
                }
            }.frame(width: geometry.size.width)
            .edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
        }
    }
}

Answer 2

这是因为你添加阴影的方式。如果您移除阴影（并将 Rectangle 的颜色更改为白色以外的颜色，这样它就不会是白色不可见的白色），您将看到没有条。下面看起来有点像你想要的。基本上，您的矩形位于一个新矩形的顶部，因此阴影不再被切断。

GeometryReader { geometry in
        ScrollView(.vertical, showsIndicators: false){
            VStack{
                ForEach(0..<2){ _ in
                    ZStack {
                        Rectangle()
                            .frame(width: geometry.size.width - 30, height: 250)
                            .foregroundColor(Color.white)
                        VStack {
                            Rectangle()
                                .foregroundColor(Color.white)
                                .frame(width: geometry.size.width - 50, height: 250)
                                .cornerRadius(25)
                                .shadow(radius: 5)
                        }.padding(.top, 15)
                    }

                }
            }.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
        }
        .offset(x: 20)
    }