SwiftUI：如何在进度条中使用线性渐变？

Question

我正在尝试构建一个视图，该视图是条形图中的圆角矩形，渐变随着 value 的升高而逐渐变暗（值在 0-10.0 范围内）。但我似乎无法弄清楚如何在此处使用 UnitPoint 作为 endPoint 来获得渐变应该结束的正确点。换句话说，如果值 = 5.0，我希望渐变将条形的顶部显示为渐变最暗颜色的一半，或者换句话说，渐变的最暗颜色始终为 10.0，而条形的颜色只会显示高达酒吧是。

var body: some View {
    VStack {
        RoundedRectangle(cornerRadius: 5.0)
            .fill(LinearGradient(gradient: Gradient(colors: [ Color(UIColor(red: 0.98, green: 0.85, blue: 0.38, alpha: 1.00)) , Color(UIColor(red: 0.63, green: 0.02, blue: 0.11, alpha: 1.00))]), startPoint: .bottom, endPoint: UnitPoint(x: 0.5, y: CGFloat((value * 10 / 100)))))
            .frame(width: 40, height: open ? CGFloat(value * 10) : 0)
    }
    
}

Answer 1

我认为最好的办法是“屏蔽”梯度，而不是尝试计算 endPoint。

这是一个 HStack 中有 5 个“柱”的示例 - 第一个柱的 max 值为 10，然后是柱的值去 9, 7.5, 5, 2:

示例代码：

import SwiftUI

struct GradBars: View {
    
    var maxValue: CGFloat = 10
    
    var val1: CGFloat = 10
    var val2: CGFloat = 9
    var val3: CGFloat = 7.5
    var val4: CGFloat = 5
    var val5: CGFloat = 2
    
    @State var open: Bool = true

    let gradient = LinearGradient(gradient: Gradient(colors: [ Color(UIColor(red: 0.98, green: 0.85, blue: 0.38, alpha: 1.00)) ,
                                                               Color(UIColor(red: 0.63, green: 0.02, blue: 0.11, alpha: 1.00))]),
                                  startPoint: .bottom,
                                  endPoint: .top)
    
    var body: some View {
        VStack {
            HStack(alignment: .bottom, spacing: 8, content: {

                Rectangle()
                    .fill(gradient)
                    .frame(width: 40, height: open ? maxValue * 10 : 0, alignment: .bottom)
                    .mask(
                        VStack {
                            RoundedRectangle(cornerRadius: 5.0).frame(height: val1 * 10)
                        }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
                    )
                
                Rectangle()
                    .fill(gradient)
                    .frame(width: 40, height: open ? maxValue * 10 : 0, alignment: .bottom)
                    .mask(
                        VStack {
                            RoundedRectangle(cornerRadius: 5.0).frame(height: val2 * 10)
                        }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
                    )
                
                Rectangle()
                    .fill(gradient)
                    .frame(width: 40, height: open ? maxValue * 10 : 0, alignment: .bottom)
                    .mask(
                        VStack {
                            RoundedRectangle(cornerRadius: 5.0).frame(height: val3 * 10)
                        }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
                    )
                
                Rectangle()
                    .fill(gradient)
                    .frame(width: 40, height: open ? maxValue * 10 : 0, alignment: .bottom)
                    .mask(
                        VStack {
                            RoundedRectangle(cornerRadius: 5.0).frame(height: val4 * 10)
                        }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
                    )
                
                Rectangle()
                    .fill(gradient)
                    .frame(width: 40, height: open ? maxValue * 10 : 0, alignment: .bottom)
                    .mask(
                        VStack {
                            RoundedRectangle(cornerRadius: 5.0).frame(height: val5 * 10)
                        }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
                    )
                
            })
        }
    }

}

struct GradBars_Previews: PreviewProvider {
    static var previews: some View {
        GradBars()
    }
}

SwiftUI：如何在进度条中使用线性渐变？

SwiftUI: How to use a linear gradient in a progress bar?

ios

swift

swiftui

gradient

linear-gradients