ios - 如何在 SwiftUI 中将渐变前景色文本移动到视图的中心？

Question

我在 SwiftUI 中使用Gradient修饰符.mask(_:)来实现Text渐变前景色。但文本始终位于视图的顶部。我怎样才能把它放在视图的中心？

这是我的实现：

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()
    }
}

它看起来如何：

标签： ioslayoutswiftuigradient

Answer 1

问题是它LinearGradient正在填满它给出的所有空间。如果您删除mask，您将看到它有多大。您希望它只是文本的大小。

我确信有更好的方法来处理这个问题，但这就是我想出的。通过从文本开始，我们可以使用与文本大小完全匹配的LinearGradientas 。overlay

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))
    }
}

---

进一步扩展这个想法，您可以将GradientTexttaketext和gradient作为输入，以便您可以轻松地重复执行此操作：

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))
        }
    }
}