Saltar al contenido

Cómo convertir `UIColor` a SwiftUI’s` Color`

Solución:

A partir de la versión beta 5, puede crear un color a partir de un UIColor:

Color(UIColor.systemBlue)

Tanto iOS como macOS

Color tiene un inicializador nativo que requiere un UIColor o NSColor como argumento:

Color(.red) /* or any other UIColor/NSColor you need INSIDE parentheses */

NO llama Color(UIColor.red) explícitamente !!!. Esto acoplará su código SwiftUI al UIKit. En cambio, solo llama Color(.red) Eso inferirá el módulo correcto automáticamente.

Además, tenga en cuenta esta diferencia:

Color.red     /* this `red` is SwiftUI native `red` */
Color(.red)   /* this `red` is UIKit `red` */

suColor vs uiColor

Tenga en cuenta que:

Color.red y UIColor.red están NO ¡mismo! Ellos tienen valores diferentes y se ve diferente juntos. Así que NO asumas esto no vale nada

Estos son iguales en cambio: SwiftUI.Color.Red == UIKit.UIColor.systemRed


Extensión

Puede implementar una variable personalizada para que se parezca más cgColor y ciColor

extension UIColor {
    /// The SwiftUI color associated with the receiver.
    var suColor: Color { Color(self) }
}

entonces sería como:

UIColor.red         // UIKit color
UIColor.red.suColor // SwiftUI color
UIColor.red.cgColor // Core graphic color
UIColor.red.ciColor // Core image color

Usando dos extensiones auxiliares:

Para extraer componentes de UIColor:

extension UIColor {
    var rgba: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {
        var red: CGFloat = 0
        var green: CGFloat = 0
        var blue: CGFloat = 0
        var alpha: CGFloat = 0
        getRed(&red, green: &green, blue: &blue, alpha: &alpha)

        return (red, green, blue, alpha)
    }
}

Para init con UIColor:

extension Color {
    init(uiColor: UIColor) {
        self.init(red: Double(uiColor.rgba.red),
                  green: Double(uiColor.rgba.green),
                  blue: Double(uiColor.rgba.blue),
                  opacity: Double(uiColor.rgba.alpha))
    }
}

Uso:

Color(uiColor: .red)
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *