有没有一种方法可以在滚动视图中垂直滚动内容时保持圆角

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位于最外边缘(圆角也是如此(，但您正在填充内部视图。所以当你滚动它时；满足"；圆形掩模形状。

将填充从内向外移动，然后.掩码工作：

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