SwiftUI矩形突然变成了圆角矩形。

Question

我刚刚开始学习SwiftUI并尝试使用视图和动画，我想要创建一个控制器，就像苹果的控制中心中的音量或亮度控制器一样。但是我发现了一个有趣的小问题，不太清楚该怎么处理。

struct DragControler: View {
    @GestureState var fillPercentGS : Double = 0.5
    @State var fillPercent = 0.5
    var body: some View {
        ZStack{

            Rectangle()
            GeometryReader { geometry in
                VStack(spacing: 0) {
                    Rectangle().foregroundColor(.red) //these rects
                    Rectangle().foregroundColor(.green).frame(height: geometry.size.height * CGFloat(self.fillPercent))
                }.gesture(DragGesture(coordinateSpace: .local).updating(self.$fillPercentGS, body: { (value, state, transaction) in
                    state =  Double(value.location.y/geometry.size.height)

                }).onChanged({ (value) in
                    self.fillPercent = max(0, min(1 - Double(value.location.y/geometry.size.height), 1))
                }))
            }
            Text("\(fillPercent)").foregroundColor(.white)
            }.cornerRadius(50).aspectRatio(1/4, contentMode: .fit).padding()
    }
}

GIF 当一个矩形填满整个视图时，它会变成圆角矩形

如您所见，在这个gif中，当我将其全部拖到顶部或底部时，代码中明确说明为矩形的矩形会变成圆角矩形。

那么，这是为什么？ 我已经尝试用clipShape(RoundedRect(...))替换.cornerRadius()修饰符，但没有帮助。 但是我发现如果显式地将这些矩形的圆角半径设置为零，它会有所帮助。

Rectangle().cornerRadius(0).foregroundColor(.red)
Rectangle().cornerRadius(0).foregroundColor(...)

我猜这是SwiftUI在后台进行的一种优化。

提前感谢。

- SweetPiggy

Answer 1

我认为这看起来像是一个bug，但有一个简单的解决方法。只需将绿色矩形的角半径明确设置为0：

Rectangle().foregroundColor(.green).frame(height: geometry.size.height * CGFloat(self.fillPercent)).cornerRadius(0)

- Paulw11