在滚动视图中垂直滚动内容时，有没有办法保持圆角

Question

在开始滚动之前，屏幕上显示的所有内容看起来都很棒，并且带有圆角。当用户开始滚动页面时，问题就来了，顶角被内容的背景颜色（尖角）取代...有没有办法让我的内容始终显示为圆角，即使用户垂直滚动也是如此？

var body : some View{
    GeometryReader { geometry in

        ZStack{
            Color(.red).cornerRadius(20).padding(.horizontal, 15).frame(height: geometry.frame.height).clipped()
            
            ScrollView(.vertical, showsIndicators: true) {
                ZStack{
                    Color(.blue).resizable().cornerRadius(20).padding(.horizontal, 15)
                    .frame(height: geometry.frame.height).clipped()
                    
                    //some contents
                }
                VStack{
                    Color(.green).resizable().cornerRadius(20).padding(.horizontal, 15)
                    .frame(height: geometry.frame.height).clipped()
                    HStack{
                        //some other content
                    }
                }
                
            }.frame(height: geometry.frame.height)
            
        }.mask(Rectangle().cornerRadius(15).frame(height: geometry.frame.height))
        //.frame(height: geometry.frame.height)
        //.clipShape(RoundedRectangle(cornerRadius: 15))
    }
}

我试过 mask/clipshape 但似乎没用。

Answer 1

您的 .mask 位于最外边（圆角也是如此），但您正在填充内部视图。因此，当您滚动时，它永远不会“遇到”圆形遮罩形状。

将 padding 从里面移到外面，然后 .mask 起作用：

var body : some View{
    GeometryReader { geometry in
        ZStack{
            Color(.red)
                .cornerRadius(20)
//                .padding(.horizontal, 15)
                .frame(height: geometry.size.height)
            
            ScrollView(.vertical, showsIndicators: true) {
                ZStack{
                    Color(.blue)
                        .cornerRadius(20)
                        .frame(height: geometry.size.height)
                    
                    //some contents
                }
                VStack{
                    Color(.green)
                        .cornerRadius(20)
//                            .padding(.horizontal, 15)
                        .frame(height: geometry.size.height)
                    HStack{
                        //some other content
                    }
                }
            }
        }
        .mask(RoundedRectangle(cornerRadius: 15))
        .padding(.horizontal, 15)   // << padding here
    }
}

在滚动视图中垂直滚动内容时，有没有办法保持圆角

Is there a way to keep rounded corners when scrolling through content vertically in scrollview

ios

swiftui

scrollview

swiftui-zstack