时间戳

首页 > 解决方案 > SwiftUI：如何在进度条中使用线性渐变？

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

问题描述

我正在尝试在条形图中构建一个圆角矩形视图，其梯度越高，渐变越深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)
    }
    
}

标签： iosswiftswiftuigradientlinear-gradients

解决方案

我认为你最好的选择是“掩盖”梯度，而不是试图计算endPoint.

这是一个在 an 中有 5 个“条”的示例HStack- 第一个条的最大值为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()
    }
}

推荐阅读