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

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

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)
    }

Answer 3

在 iOS 17 上您可以使用

scrollClipDisabled

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@*/)
        }.scrollClipDisabled()
    }
}