SwiftUI：如何为文本添加自定义修饰符

Question

到目前为止，我能够为视图编写自定义修饰符；然而，当我试图保持我的代码 DRY 时，我试图为 TextFields 添加一个自定义修饰符。视图修饰符非常适用于以下内容：

struct sampleModifier : ViewModifier {
    var height: CGFloat? = 100
    func body(content: Content) -> some View {
        content
            .frame(height: height)
            .background(Color.white)
            .border(Color.gray, width: 0.5)
            .shadow(color: Color.black, radius: 15, x: 0, y: 10)
    }
}

但是当我尝试使用诸如font等修饰符时，它显示了很多错误。我明白他们可能需要更具体，而不是符合TextFieldStyleModifier，但我不知道如何使它工作。我试图这样做但没有成功：

struct TitleModifier : TextFieldStyleModifier {
    func body(content: TextFieldStyle) -> some View {
        content
            .font(.custom("Open Sans", size: 18))
            .color(Color.green)

    }
}

这显然失败并显示以下错误：

如果我点击Fix建议，它会将其添加到我的代码中

TextFieldStyleModifier<<#Style: TextFieldStyle#>>

我不知道怎么用。

有什么建议？

Answer 1

现在可以向内部 ViewModifier添加.font()和.foregroundColor()修改器content。但是，如果您想添加一些只能应用于特定视图的自定义修饰符，例如.strikethrough()文本视图的修饰符，您可以将这些修饰符添加到扩展中。

struct TitleModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.custom("Open Sans", size: 18))
            .foregroundColor(.green)
    }
}

extension Text {
    func customText() -> some View {
        self.strikethrough().bold().italic().lineLimit(4)
            .modifier(TitleModifier())
    }
}

用法Text("Hello").customText()。

Answer 2

TextFields 也是视图，因此您可以以相同的方式创建修饰符：

struct TitleModifier : ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.custom("Open Sans", size: 18))
            .foregroundColor(Color.green)

    }
}

另请注意，没有修饰符 .color()。它是 .foregroundColor()。

当您想将其应用于 FormField 时，您只需执行以下操作：

TextField("", text: $field1).modifier(TitleModifier())

Answer 3

您可以创建自定义 TextFieldStyle，这仅适用于 TextField，不适用于视图容器上的其他视图

struct CustomTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .font(.custom("Open Sans", size: 18))
            .foregroundColor(Color.green)
    }
}

用法：

Group {
    Text("not applied here")
    TextField("applied here", text: $presenter.name)
}
.textFieldStyle(CustomTextFieldStyle())