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

问题描述

我使用Gradient和.mask(_:)修饰符在SwiftUI中实现了带有渐变前景色的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()
    }
}

它看起来如何：

解决方法

问题在于LinearGradient正在填充它给定的所有空间。如果删除mask，则会看到它的大小。您希望它只是文本的大小。

我确定有更好的方法来处理此问题，但这就是我想出的。通过以文本开头，我们可以将LinearGradient用作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))
    }
}

---

进一步扩展这个想法，您可以使GradientText以text和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,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,design: .rounded)))
            GradientText(text: Text("Goodnight World"),gradient: LinearGradient(gradient: Gradient(colors: [.green,.yellow,endPoint: .trailing))
        }
    }
}