Gradient

Gradient

Dégradé Linéaire LinearGradient

struct GradientView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color.black, Color.purple]), startPoint: .topLeading, endPoint: .bottom)
        }
        .ignoresSafeArea()
    }
}

Le dégradé linéaire crée une transition de couleur le long d’une ligne droite. Tu peux définir les couleurs du dégradé ainsi que la direction en utilisant ses points de départ et de fin.

→ colors Un tableau de Color qui spécifie les couleurs du dégradé.

→ startPoint et endPoint Ces paramètres définissent la direction du dégradé, par exemple, de haut en bas ou de gauche à droite

Il n’y a pas de limite de couleurs (minimum deux)

struct GradientView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color.black,Color.blue, Color.purple, Color.yellow, Color.orange, Color.red]), startPoint: .topLeading, endPoint: .bottom)
        }
        .ignoresSafeArea()
    }
}

Dégradé Radial RadialGradient

struct GradientView: View {
    var body: some View {
        ZStack {
            RadialGradient(gradient: Gradient(colors: [Color.red, Color.black]), center: .center, startRadius: 0, endRadius: 200)
        }
        .ignoresSafeArea()
    }
}

Le dégradé radial crée une transition de couleur qui rayonne à partir d’un point central vers les bords. Il est défini par un centre, un point de début, et un rayon.

→ center Le point central à partir duquel le dégradé commence.

→ startRadius et endRadius Ils définissent respectivement le rayon de début et de fin du dégradé, permettant de contrôler la façon dont les couleurs se diffusent depuis le centre vers les bords.

Dégradé Conique AngularGradient

struct GradientView: View {
    var body: some View {
        ZStack {
            AngularGradient(gradient: Gradient(colors: [Color.red, Color.yellow, Color.blue, Color.green, Color.white, Color.purple]), center: .center)

        }
        .ignoresSafeArea()
    }
}

Le dégradé conique (ou angulaire) crée une transition de couleur en cercle autour d’un point central, un peu comme les couleurs d’un arc-en-ciel.

→ center Le point central autour duquel le dégradé tourne, définissant l’origine de la transition circulaire des couleurs.

Utilisation des dégradés sur une vue

struct GradientView: View {
    var body: some View {
        ZStack {
            AngularGradient(gradient: Gradient(colors: [Color.red, Color.yellow, Color.blue, Color.green, Color.white, Color.purple]), center: .center)

        }
        .ignoresSafeArea()
    }
}

Les dégradés peuvent être utilisés comme remplissage de n’importe quelle vue dessinable, telle que Rectangle, Circle, etc., ou comme arrière-plan d’une vue.

Utilisation des dégradés sur du texte .foregroundStyle()

struct GradientView: View {
    var body: some View {
        ZStack {
            Text("Zerg")
                .font(.largeTitle)
                .fontWeight(.black)
                .foregroundStyle(LinearGradient(gradient: Gradient(colors: [Color.black, Color.purple]), startPoint: .topLeading, endPoint: .bottom))
            
        }
        .ignoresSafeArea()
    }
}