Couleurs en SwiftUI

Introduction aux couleurs

Dans SwiftUI, la gestion des couleurs est principalement effectuée via la structure Color. Cette structure permet de créer des instances de couleur qui peuvent être définies par des valeurs de composant comme RGB (Rouge, Vert, Bleu), HSL (Teinte, Saturation, Luminance) ou encore en niveaux de gris. Les couleurs sont essentielles pour embellir l'interface d'une application, en apportant des éléments visuels attrayants.

Création de couleurs à partir de valeurs de composant

Il existe plusieurs façons de définir des couleurs en SwiftUI :

• RGB : La notation RGB utilise trois paramètres pour spécifier les degrés de rouge, vert et bleu. Chacun de ces paramètres doit être un nombre à virgule flottante compris entre 0 et 255. Voici un exemple :

let rgbColor = Color(red: 255.0 / 255.0, green: 128.0 / 255.0, blue: 64.0 / 255.0)

• HSL : Les couleurs HSL se composent de trois composants : la teinte (valeur entre 0 et 360), la saturation et la lumière, toutes deux variant de 0 à 1. Voici comment créer une couleur HSL :

let hslColor = Color(hue: 220.0, saturation: 0.65, lightness: 0.75)

• Niveaux de gris : Pour les nuances de gris, seule la propriété blanche est nécessaire, variant de 0 (noir) à 1 (blanc).

let grayscaleColor = Color(white: 0.5)

Propriétés de couleur standard

Les couleurs peuvent également être déclarées à l'aide de propriétés de couleur standard. Voici quelques exemples :

let someColor = Color.red  // Utilisation de la notation de point 
let anotherColor = Color(.blue)  // Utilisation de la notation avec accolade 

Les propriétés de couleur standard incluent des couleurs comme .red, .green, .white, et d'autres qui peuvent changer en fonction du contexte, par exemple en mode sombre ou clair.

Exemples d'utilisation des couleurs

Dans cet exemple, nous allons définir plusieurs couleurs et les afficher à l'écran dans une liste :

import SwiftUI

struct ContentView: View {
    var body: some View {
        let colorsArray = [Color.red, Color.green, Color.blue]

        VStack {
            ForEach(colorsArray, id: \.self) { color in
                Rectangle()
                    .fill(color)
                    .frame(height: 100)
            }
        }
        .padding()
    }
}

Dans ce scénario, chaque rectangle est rempli avec la couleur respective de l'array."},{