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

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

我试过面具/剪辑形状，但似乎没有用。

Answer 1

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

将填充从内部移动到外部，然后 .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
    }
}