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

Question

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

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

这是代码：

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

也许还没有 API 呢？

Answer 1

没有它的api（还）。 但你可以：

使用placeholder修饰符将任何视图显示为任何其他视图的持有者！ 例如：

TextField("", text: $text)
    .placeholder(when: text.isEmpty) {
        Text("Placeholder recreated").foregroundColor(.gray)
}

💡 这是一个简单的ZStack ，您可以在View扩展中使用它，例如：

extension View {
    func placeholder<Content: View>(
        when shouldShow: Bool,
        alignment: Alignment = .leading,
        @ViewBuilder placeholder: () -> Content) -> some View {

        ZStack(alignment: alignment) {
            placeholder().opacity(shouldShow ? 1 : 0)
            self
        }
    }
}

🎁现在您可以将任何类型的样式应用于占位符，例如带有图像的渐变占位符：

✅ 如果您有兴趣，这里是如何在任何视图上应用可调整大小的渐变

---

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

这是对@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)作为viewModifier到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 4

如果您想保留原始 TextField 并且不介意将 Introspect 添加到您的项目（ https://github.com/siteline/SwiftUI-Introspect ），您可以通过访问 UIKit attributedPlaceholder Placeholder 来实现：

TextField("Email", text: $email)
.introspectTextField { uiTextField in
    uiTextField.attributedPlaceholder = NSAttributedString(string: "placeholder text", 
    attributes: [NSAttributedString.Key.foregroundColor: UIColor.red])
}

Answer 5

超级简单的解决方案

我们可以将 TextField 的占位符替换为另一个 Text 的字符串。

所以，我们可以控制一个假的“占位符”的颜色。

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 6

选项 1：TL;DR 简短回答：

myUiTextField.attributedPlaceholder = NSAttributedString(string: placeHolderText, attributes: [NSAttributedString.Key.foregroundColor: placeHolderTextColor])

对上述答案的解释：使用其他社区成员在此处也建议的属性字符串。

选项 2：长答案但干净且可扩展：我们在我们的项目中创建了一个扩展类，使用以下方法为一些参数提供默认值，以保持代码干净、可扩展和可重用：

    import UIKit

    extension UITextField {

        /// Set the placeholder text properties of a UITextField
        /// - Parameters:
        ///   - placeHolder: text message for placeholder
        ///   - foregroundColor: text color (optional)
        ///   - fontSize: text font size (optional)
        func placeHolderSetup(placeHolder: String, foregroundColor: UIColor = UIColor.AppColors.zGreyColor, fontSize: CGFloat = 16)  {
            let str = NSAttributedString(string: placeHolder,
                                     attributes:[NSAttributedString.Key.foregroundColor:foregroundColor,NSAttributedString.Key.font: UIFont(name: AppFonts.zFontRegular, size: fontSize)!])
            
             self.attributedPlaceholder = str;
         }
     }

上述方法的示例用法：

searchTextField?.placeHolderSetup(placeHolder: "Search", foregroundColor: UIColor.white, fontSize: 14)

Answer 7

在我的情况下，我只需要更改前景色，所以当字段文本为空时，我只需更改样式。

TextField("Your placeholder text", text: $fieldText)
  .foregroundColor(fieldText.isEmpty ? .gray : .black)

我已经尝试了其他答案并且它们运行良好，但感觉就像我编写了两次类似的代码并且只需要维护额外的代码来更改一个修饰符。

Answer 8

您可以尝试根据TextField的内容更改颜色。 也许是这样的：

@State var text : String
@State var textFieldColor : Color = .secondary

TextField("Placeholder", text: $text)
   .foregroundColor(textFieldColor)
   .onChange(of: text) { value in
      textFieldColor = value == "" ? .red : .green
   }

Answer 9

在 iOS 15上，您可以使用prompt

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

用作占位符视图