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

【问题标题】：SwiftUI: How to use a linear gradient in a progress bar?SwiftUI：如何在进度条中使用线性渐变？
【发布时间】：2021-08-15 01:22:59
【问题描述】：

我正在尝试在条形图中构建一个圆角矩形视图，value 越高，渐变越暗（值在 0-10.0 范围内）。但我似乎不知道如何在这里使用UnitPoint 来让 endPoint 获得渐变应该结束的正确点。换句话说，如果 value = 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)
    }
    
}

【问题讨论】：

标签： ios swift swiftui gradient linear-gradients

【解决方案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()
    }
}

【讨论】：