ios - 是否可以在 SwiftUI 渐变中为颜色添加“权重”？

Question

我使用颜色渐变作为我的应用程序的背景（在 SwiftUI 中）。

为此，我刚刚将背景设置为这样的线性颜色渐变（缩写）：

private var grade = Gradient(colors: [Color("Red"), Color("Blue")])

...

.background(LinearGradient(gradient: grade, startPoint: .top, endPoint: .bottom))

当用户增加圆圈中的数字（通过拖动小圆圈）时，我希望渐变为“红移”，而当它为较小的数字时，渐变为“蓝移”。

我尝试过的一件事是将颜色设置为一个非常大的数组，从一半颜色（“红色”）和一半颜色（“蓝色”）开始；然后我想我可以在用户拖动时更改红色的数量；但是，这也会减少应用的渐变量（它看起来更像是一个红色框和一个蓝色框，然后是渐变）。虽然它确实在较小的范围内工作，所以我将颜色设置为 [Color("Red"), Color("Red"), Color("Blue")] 以显示我可能希望它看起来像更大数字：

不过，我希望这种效果是连续的（或有效连续的）。

我希望这能证明我正在努力实现的目标，并且一如既往地感谢您的帮助！

标签： iosswiftswiftuigradient

Answer 1

这是可能的解决方案。使用 Xcode 11.4 / iOS 13.4 测试

注意：当然参数可以根据您的需要进行修改

struct DemoGradientShift: View {
    private var grade = Gradient(colors: [.red, .blue])
    @State private var value: CGFloat = 50
    var body: some View {
        ZStack {
            VStack {
                Rectangle().fill(Color.red)
                Rectangle().fill(Color.blue)
            }
            Rectangle().fill(LinearGradient(gradient: grade, startPoint: .top, endPoint: .bottom))
                .offset(x: 0, y: 5 * (50 - value))
            Slider(value: $value, in: 1...100)
        }
        .edgesIgnoringSafeArea(.all)
    }
}