Question 68440 in IOS Swift Question posted in
The official documentation can be found here.

SwiftUI: Change Color brightness in gradient – Ios swift

I’m trying to create a gradient using the same color with a brightness modifier at one end. I tried this:

    let gradient = LinearGradient(
        colors: [Color.blue, Color.blue.brightness(0.1)],
        startPoint: .top, endPoint: .bottom)

Unfortunately this does not compile with the following error: Cannot convert value of type 'some View' to expected element type 'Array<Color>.ArrayLiteralElement' (aka 'Color')

According to this thread I would have expected it to work. How can I fix this?

Tags:

2

Answers


  1. 0

    The brightness modifier creates a view, not a color. A possible solution is to use Color with HSB initialiser, like below

    let gradient = LinearGradient(
    colors: [Color.blue, Color(hue: 229/360, saturation: 0.98, brightness: 0.1)],
    startPoint: .top, endPoint: .bottom)
    Login or Signup to reply.
  2. 0

    You cannot use brightness(_:) modifier here. It returns View instead of Color.

    If you want to add brightness to Color, you may need help from UIKit and need to implement as below.

    extension Color {
    func adjust(hue: CGFloat = 0, saturation: CGFloat = 0, brightness: CGFloat = 0, opacity: CGFloat = 1) -> Color {
        let color = UIColor(self)
        var currentHue: CGFloat = 0
        var currentSaturation: CGFloat = 0
        var currentBrigthness: CGFloat = 0
        var currentOpacity: CGFloat = 0

        if color.getHue(&currentHue, saturation: &currentSaturation, brightness: &currentBrigthness, alpha: &currentOpacity) {
            return Color(hue: currentHue + hue, saturation: currentSaturation + saturation, brightness: currentBrigthness + brightness, opacity: currentOpacity + opacity)
        }
        return self
    }
}

    Then you can use it like this.

    LinearGradient(
    colors: [
        Color.blue.adjust(brightness: 0.5),
        Color.blue,
        Color.blue.adjust(brightness: -0.5),
    ],
    startPoint: .top,
    endPoint: .bottom
)

    You can also use this initializer Color(hue:saturation:brightness:opacity:) for your custom color.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search