Swiftui - 仅显示视图的百分比

Question

我有一个RoundedRectangle ，我的目标是在它上面放置另一个RoundedRectangle ，以便覆盖显示“完成百分比”。 不过，我似乎找不到合适的咒语。

我认为理想情况下，覆盖应该以某种方式只显示其自身的一部分。 调整自身大小以匹配百分比会扭曲叠加层的形状。

import PlaygroundSupport

struct ContentView: View {

    @State private var value: Double = 0

    var body: some View {
        GeometryReader { geom in
            VStack {
                Slider(value: self.$value, in: 0...1, step: 0.01)

                ZStack {
                    ZStack(alignment: .leading) {

                        // The main rectangle
                        RoundedRectangle(cornerRadius: 10)
                            .fill(Color.blue)
                            .frame(width: geom.size.width,
                                   height: 200)

                        // The progress indicator...
                        RoundedRectangle(cornerRadius: 10)
                            .fill(Color.red)
                            .opacity(0.5)
                            .frame(width: CGFloat(self.value) * geom.size.width,
                                   height: 200)
                    }

                    Text("\(Int(self.value * 100)) %")
                }
            }
        }
        .padding()
    }
}

PlaygroundPage.current.setLiveView(ContentView())

在上面的操场上，如果您查看 1、2 甚至 3 %，您可以看到红色叠加层超出了左上角和左下角的蓝色背景矩形边界。 见下图。

我觉得这不是正确的解决方案，但我也找不到正确的组合（尝试scaleEffect ，一堆offset和position数学）来真正确定它。

对我来说，就像我上面所说的，当值为0.4时，感觉覆盖应该能够说“只让我最左边的 40% 可见”。

那是冗长的，我为此道歉。 如果你已经读到这里，并且有任何建议可以传授，我将非常感激。

谢谢！

Answer 1

如果我正确理解您的担忧，这里有一个解决方案。 使用 Xcode 11.4 / iOS 13.4 进行测试。

ZStack {
    ZStack(alignment: .leading) {

        // The main rectangle
        RoundedRectangle(cornerRadius: 10)
            .fill(Color.blue)
            .frame(width: geom.size.width,
                   height: 200)

        // The progress indicator...
        RoundedRectangle(cornerRadius: 10)
            .fill(Color.red)
            .opacity(0.5)
            .frame(width: CGFloat(self.value) * geom.size.width,
                   height: 200)
    }
    .clipShape(RoundedRectangle(cornerRadius: 10))    // << here !!

Answer 2

这就是我处理它的方式，因此我不必管理多个cornerRadius 。

VStack {
    ZStack(alignment: .leading) {

        // The main rectangle
        Rectangle()
            .fill(Color.blue)
            .frame(width: geom.size.width,
                   height: 200)

        // The progress indicator...
        Rectangle()
            .fill(Color.red)
            .opacity(0.5)
            .frame(width: CGFloat(self.value) * geom.size.width,
                   height: 200)
    }
    .cornerRadius(10)