[英]SwiftUI Widget iOS 14 gradient issue
我想使用自定义 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 项目
我在我的应用程序中遇到了确切的问题,我通过在背景修饰符之后添加 .blendMode(.darken) 来修复它。 我希望这也能解决你的问题。
此代码显示了使用 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)
这是一种在不影响发布版本中的暗模式行为的情况下使用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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.