I want to create a gradient color for my widget using custom colors. And I have a problem when I only use two colors, as a result, not one of the colors is applied, but the background turns green!
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)
}
}
But If I added one more color it's looks great.
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: Create a GitHub project with this issue
I've faced the exact issue in my app, and I've fixed it by adding .blendMode(.darken) after the background modifier. I hope that would solve your problem too.
This code shows a bug with gradient colors which is happening using Widgets extension for iOS 14
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)
Also all three gradient types conform to the ShapeStyle protocol, you can use them for backgrounds, fills, and strokes. For example, this uses our rainbow conical gradient as a thick inner stroke for a circle:
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)
Here's a way to use Faisal's finding without affecting dark mode behavior in release builds.
/// 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
}()
Then use this with a blendMode
modifier on your gradient:
RadialGradient(...)
.blendMode(workAroundBlendMode)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.