ZStack，其中RoundedRectangles作为条形图。如何正确填充？

Question

我想使用ZStack中的两个RoundedRectangles（用于演示目的的滑块）创建垂直条形图：

struct SwiftUIView: View {

    @State var value : CGFloat = 0.0

    var body: some View {
        VStack(spacing: 16) {
            ZStack(alignment: .leading) {
                RoundedRectangle(cornerRadius: 20).foregroundColor(Color.gray).frame(width: 300, height: 30)
                RoundedRectangle(cornerRadius: 20).foregroundColor(Color.green).frame(width: value, height: 30)
            }
            Text(Int(value).description)
            Slider(value: $value, in: 0...300).frame(width: 300)
        }
    }
}

这适用于〜30以上的所有值。由于拐角半径，下面的值会将绿色矩形缩小，使其显示在第一个矩形的正上方：

如何防止这种情况或如何以其他方式创建此简单的条形图？

谢谢。

Answer 1

您需要剪切以下形状

ZStack(alignment: .leading) {
    RoundedRectangle(cornerRadius: 20).foregroundColor(Color.gray).frame(width: 300, height: 30)
    RoundedRectangle(cornerRadius: 20).foregroundColor(Color.green).frame(width: value, height: 30)
}
.clipShape(RoundedRectangle(cornerRadius: 20))   // << here !!

Answer 2

这是使用mask和overlay的替代解决方案：

struct Chart: View {
    @Binding var value: CGFloat

    var body: some View {
        let rectangle = RoundedRectangle(cornerRadius: 20)
        return rectangle.overlay(
            GeometryReader { _ in
                ZStack(alignment: .leading) {
                    Rectangle()
                        .frame(width: value)
                        .foregroundColor(.green)
                }
            }
            .mask(rectangle)
        )
        .foregroundColor(.gray)
    }
}

Chart(value: $value)
    .frame(width: 300, height: 30)