SwiftUI 线性仪表

Question

更新

我能够更接近我想要实现的目标。仍然需要工作。我试图为蒙版使用圆角矩形，但看起来不太好。任何建议将不胜感激。

GeometryReader { geometry in
    RoundedRectangle(cornerRadius: 7.5, style: .circular)
        .fill(LinearGradient(gradient: Gradient(colors: [Color.green, Color.yellow, Color.orange, Color.red, Color.purple]), startPoint: .bottom, endPoint: .top))
        .frame(width: geometry.size.width, height: geometry.size.height, alignment: .bottomLeading)
        .overlay(Color.black.opacity(0.35).cornerRadius(7.5))
    RoundedRectangle(cornerRadius: 7.5, style: .circular)
        .fill(LinearGradient(gradient: Gradient(colors: [Color.green, Color.yellow, Color.orange, Color.red, Color.purple]), startPoint: .bottom, endPoint: .top))
        .frame(width: geometry.size.width, height: geometry.size.height, alignment: .bottomLeading)
        .mask(
            VStack {
                Spacer()
                Rectangle()
                    // Adjust value 1 to needs
                    .frame(width: geometry.size.width, height:geometry.size.height * (CGFloat(1) / CGFloat(11)), alignment: .bottom)
            })
}
.frame(width: 15, height: .infinity)
.padding(.all, 10)

年长

我正在尝试创建一个简单的仪表，例如 watchOS 中的线性仪表。我遇到的麻烦是找出覆盖当前值的正确方法。我想看到的结果如下。我相信有更好的方法。

结果

我的看起来糟透了

ZStack {
    LinearGradient(gradient: Gradient(colors: [Color.green, Color.yellow, Color.orange, Color.red, Color.purple]), startPoint: .bottom, endPoint: .top)
    GeometryReader { metrics in
        Circle()
            .stroke(Color.white,lineWidth: 2)
            .frame(minHeight: 0, maxHeight: metrics.size.height)
            .foregroundColor(Color.clear)
            .position(x: metrics.size.width / 2 ,y: metrics.size.height * (CGFloat(10) / CGFloat(11)))
    }
}
.cornerRadius(7.5)
.frame(minWidth: 0, maxWidth: 15)

Answer 1

我已经解决了我的解决方案。我设法通过制作自定义 ProgressView 样式来创建相同的视图。

SwiftUI 线性仪表

SwiftUI linear gauge

swiftui

geometryreader