ScrollView用白条切掉部分视图(SwiftUI)

时间:2020-09-22 00:07:57

标签: swiftui

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

enter image description here

它的外观:

enter image description here

代码:

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

我设置总是被切掉的矩形的大小都没有关系。 该如何解决?谢谢

2 个答案:

答案 0 :(得分:1)

它被scrollview剪辑。这是可能的解决方案。在Xcode 12 / iOS 14上进行了测试。

demo

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

答案 1 :(得分:0)

这是因为添加阴影的方式。如果删除阴影(并将矩形的颜色更改为白色以外的其他颜色,则在看不见白色的情况下不会变成白色),您将看到没有任何条形。以下内容看起来更像您想要的。基本上,您的矩形位于新矩形的顶部,这样就不会再遮挡阴影了。

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