Comment déplacer le texte en dégradé et en couleur de fond au centre de la vue dans SwiftUI ?

Question

J'ai utilisé Gradient avec un .mask(_:) pour mettre en œuvre Text avec une couleur d'avant-plan en dégradé dans SwiftUI. Mais le texte est toujours en haut de la vue. Comment puis-je le mettre au centre de la vue ?

Voici ma mise en œuvre :

import SwiftUI

struct GradientText: View {
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [.blue, .red, .orange]), 
                       startPoint: .leading, endPoint: .trailing)
            .mask(Text("Hello, world!")
                .font(.system(size: 40, weight: .bold, design: .rounded)))
            .padding()
    }
}

Et comment ça se présente :

Answer 1

Le problème est que le LinearGradient remplit tout l'espace qui lui est imparti. Si vous supprimez le mask vous verrez à quel point il est grand. Vous aimeriez qu'il soit juste de la taille du texte.

Je suis sûr qu'il y a une meilleure façon de procéder, mais c'est ce que j'ai trouvé. En commençant par le texte, nous sommes en mesure d'utiliser la fonction LinearGradient comme un overlay qui correspondra exactement à la taille du texte.

struct GradientText: View {
    let text = Text("Hello World")
        .font(.system(size: 40, weight: .bold, design: .rounded))

    var body: some View {
        text
        .foregroundColor(.clear)
        .overlay(
            LinearGradient(gradient: Gradient(colors: [.blue, .red, .orange]),
                startPoint: .leading, endPoint: .trailing)
            .mask(text))
    }
}

---

En poussant cette idée plus loin, vous pourriez faire GradientText prendre text y gradient comme entrées, de sorte que vous puissiez facilement faire cela de manière répétée :

struct GradientText: View {
    let text: Text
    let gradient: LinearGradient

    init(text: Text, gradient: LinearGradient? = nil) {
        self.text = text
        self.gradient = gradient ?? LinearGradient(gradient: Gradient(colors: [.blue, .red, .orange]), startPoint: .leading, endPoint: .trailing)
    }

    var body: some View {
        text
        .foregroundColor(.clear)
        .overlay(
            gradient
            .mask(text))
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            GradientText(text: Text("Hello World")
                .font(.system(size: 40, weight: .bold, design: .rounded)))
            GradientText(text: Text("Goodnight World"), gradient: LinearGradient(gradient: Gradient(colors: [.green, .yellow, .orange]), startPoint: .leading, endPoint: .trailing))
        }
    }
}