SwiftUI Widget iOS 14 渐变问题答案

【问题标题】：SwiftUI Widget iOS 14 gradient issueSwiftUI Widget iOS 14 渐变问题
【发布时间】：2021-02-05 12:49:56
【问题描述】：

我想使用自定义颜色为我的小部件创建渐变颜色。当我只使用两种颜色时，我遇到了一个问题，结果，没有应用一种颜色，而是背景变成了绿色！

struct WeatherWidgetMediumView: View {
    
    var gradient: LinearGradient {
        LinearGradient(
            gradient: Gradient(
                colors:
                [
                    Color(red: 96.0/255.0, green: 171.0/255.0, blue: 239.0/255.0),
                    Color(red: 163.0/255.0, green: 230.0/255.0, blue: 244.0/255.0)
                ]),
            startPoint: .top,
            endPoint: .bottom)
    }
    
    var body: some View {
        GeometryReader { geo in
            HStack(alignment: .center) {
                Divider().background(Color.black).padding(.vertical, 16.0).opacity(0.1)
            }
        }
        .background(gradient)
    }
}

但如果我再添加一种颜色，它看起来很棒。

struct WeatherWidgetMediumView: View {
    let weather: Weather
    
    var gradient: LinearGradient {
        LinearGradient(
            gradient: Gradient(
                colors:
                [
                    Color(red: 96.0/255.0, green: 171.0/255.0, blue: 239.0/255.0),
                    Color(red: 96.0/255.0, green: 171.0/255.0, blue: 239.0/255.0),
                    Color(red: 163.0/255.0, green: 230.0/255.0, blue: 244.0/255.0)
                ]),
            startPoint: .top,
            endPoint: .bottom)
    }
    
    var body: some View {
        GeometryReader { geo in
            HStack(alignment: .center) {
                Divider().background(Color.black).padding(.vertical, 16.0).opacity(0.1)
            }
            Spacer()
        }
        .background(gradient)
    }
}

UPD：创建一个包含此问题的 GitHub 项目

https://github.com/Maxim-Zakopaylov/widgetKitGradientIssue

【问题讨论】：

在这里工作正常。 Xcode 12.0。你不使用一些测试版吗？
我使用的是 12.0.1
@Asperi 你有蓝色渐变和冷杉两种颜色吗？我的问题是只使用两种颜色时我没有正确的颜色:(当我只使用两种颜色（都是蓝色）时，我有绿色渐变！这让我着迷！
小部件面临同样的问题
在 Xcode 13.0 中仍然看到这个 :(

标签： swift ios14 swiftui widgetkit

【解决方案1】：

这是一种使用 Faisal's 查找而不影响发布版本中暗模式行为的方法。

/// Work around Xcode bug where SwiftUI gradients show up as green in the Simulator
let workAroundBlendMode: BlendMode = {
    #if targetEnvironment(simulator)
    return BlendMode.plusDarker
    #else
    return BlendMode.normal
    #endif
}()

然后在渐变上使用 blendMode 修饰符：

RadialGradient(...)
    .blendMode(workAroundBlendMode)

【讨论】：

【解决方案2】：

此代码显示了使用 iOS 14 的 Widgets 扩展发生的渐变颜色错误

LinearGradient(gradient: Gradient(colors: [ Color(red: 0, green: 0.569, blue: 0.945), Color(red: 0, green: 0.329, blue: 0.953)]), startPoint: .top, endPoint: .bottom)

此外，所有三种渐变类型都符合 ShapeStyle 协议，您可以将它们用于背景、填充和描边。例如，这使用我们的彩虹圆锥渐变作为圆形的粗内笔划：

Circle()
    .strokeBorder(
        AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .center, startAngle: .zero, endAngle: .degrees(360)),
        lineWidth: 50
    )
    .frame(width: 200, height: 200)

【讨论】：

【解决方案3】：

我在我的应用程序中遇到了确切的问题，我通过在背景修饰符后添加 .blendMode(.darken) 来修复它。我希望这也能解决你的问题。

【讨论】：

警告！如果用作小部件的背景，这不适用于深色模式。