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%可见”。

话说得有点多，对此我深表歉意。如果您阅读到这里，并且有什么建议要传达，我将不胜感激。

谢谢！

- Hoopes

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

- Asperi

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)

- MwcsMac

---

你可以直接使用颜色而不是矩形吗？ - itMaxence