SwiftUI。如何更改TextField的占位符颜色？

Question

我想更改TextField的占位符颜色，但是找不到它的方法。

我尝试设置foregroundColor和accentColor，但它不会更改占位符的颜色。

这是代码：

TextField("Placeholder", $text)
    .foregroundColor(Color.red)
    .accentColor(Color.green)

也许还没有API？

Answer 1

适用于 iOS 16.0 及以上版本

TextField("", text: $viewModel.userName, prompt: Text("Phone, email or username").foregroundColor(.gray))

Answer 2

最终，将内容嵌入 ZStack 的 ViewModifier 更优雅且代码更少：

public struct PlaceholderStyle: ViewModifier {
    var showPlaceHolder: Bool
    var placeholder: String

    public func body(content: Content) -> some View {
        ZStack(alignment: .leading) {
            if showPlaceHolder {
                Text(placeholder)
                .padding(.horizontal, 15)
            }
            content
            .foregroundColor(Color.white)
            .padding(5.0)            
        }
    }
}

用法：

TextField("", text: $data)
.modifier(PlaceholderStyle(showPlaceHolder: data.isEmpty,
                           placeholder: "My Placeholder"))

Answer 3

在 iOS 15 上，您可以使用prompt

public init(text: Binding<String>, prompt: Text? = nil, @ViewBuilder label: () -> Label)

用作占位符视图

Answer 4

超级简单的解决方案

我们可以用另一个文本的字符串替换 TextField 的占位符。

因此，我们可以控制假“占位符”的颜色。

struct ContentView: View {
    
    @State private var text: String = ""
    
    var body: some View {
        ZStack(alignment: .leading) {
            if text.isEmpty {
                Text("Type Here")
                    .foregroundColor(.red.opacity(0.4))
                    .font(.system(size: 50))
            }
            TextField("", text: $text)
                .font(.system(size: 50))
        }
        .padding(20)
    }
}

Answer 5

这是对@jfk 的回答的一些修改，我们可以创建一个扩展view来简化主视图中的修饰符代码，它也可以用于Text和Image。

struct PlaceHolder<T: View>: ViewModifier {
    var placeHolder: T
    var show: Bool
    func body(content: Content) -> some View {
        ZStack(alignment: .leading) {
            if show { placeHolder }
            content
        }
    }
}

extension View {
    func placeHolder<T:View>(_ holder: T, show: Bool) -> some View {
        self.modifier(PlaceHolder(placeHolder:holder, show: show))
    }
}

在文本字段中的用法：

将这行代码添加.placeHolder(Text("Your placeholder"), show: text.isEmpty)为 a viewModifierto TextField。

TextField("", text: $text, onEditingChanged: { (changing) in
    print("Changing: \(changing)")
}, onCommit: {
    print("Committed!")
})
    .placeHolder(Text("Your placeholder"), show: text.isEmpty)

图像中的用法：

此外，正如@EmilioPelaez建议的那样，我修改了代码以支持任何视图的占位符，例如。Image像下面。

Image("your_image")
    .placeHolder(Image("placeholder_image"), show: true)

Answer 6

目前还没有api。但您可以：

ZStack自己使用和实现占位符：

var body: some View {
    ZStack(alignment: .leading) {
        if text.isEmpty { Text("Placeholder").foregroundColor(.red) }
        TextField("", text: $text)
    }
}

现在，您可以像老板一样使用任何类型的编辑。

-自定义TextField

您始终可以创建自己的自定义，View以在所有地方使用：

struct CustomTextField: View {
    var placeholder: Text
    @Binding var text: String
    var editingChanged: (Bool)->() = { _ in }
    var commit: ()->() = { }

    var body: some View {
        ZStack(alignment: .leading) {
            if text.isEmpty { placeholder }
            TextField("", text: $text, onEditingChanged: editingChanged, onCommit: commit)
        }
    }
}

用法（TextField带占位符）：

struct ContentView: View {
    @State var text = ""

    var body: some View {
        CustomTextField(
            placeholder: Text("placeholder").foregroundColor(.red),
            text: $text
        )
    }
}

Answer 7

TextField("", text: $text, prompt: Text("Hello").foregroundColor(.white))

更改提示中的文本颜色