SwiftUI Widget iOS 14 渐变问题
Posted
技术标签:
【中文标题】SwiftUI Widget iOS 14 渐变问题【英文标题】:SwiftUI Widget iOS 14 gradient issue 【发布时间】: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 中仍然看到这个 :( 【参考方案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) 来修复它。我希望这也能解决你的问题。
【讨论】:
警告!如果用作小部件的背景,这不适用于深色模式。以上是关于SwiftUI Widget iOS 14 渐变问题的主要内容,如果未能解决你的问题,请参考以下文章
SwiftUI iOS14 Widget - 使用相同的 WidgetFamily 创建多布局
如何在 SwiftUI 中添加与内容重叠的按钮上方的渐变? iOS 13