SwiftUI Widget iOS 14漸變問題

Question

我想使用自定義 colors 為我的小部件創建漸變顏色。當我只使用兩個 colors 時出現問題，結果，沒有應用 colors 之一，但背景變為綠色！

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

Answer 1

我在我的應用程序中遇到了確切的問題，我通過在背景修飾符之后添加 .blendMode(.darken) 來修復它。 我希望這也能解決你的問題。

Answer 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)

Answer 3

這是一種在不影響發布版本中的暗模式行為的情況下使用Faisal 的發現的方法。

/// 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)