如何調整 TextField 占位符顏色：SwiftUI

Question

我發現我可以像這樣在 swift 中自定義 TextField 樣式..

struct BottomLineTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        VStack() {
            configuration

            Rectangle()
                .frame(height: 1, alignment: .bottom)
                .foregroundColor(Color.white)
        }
    }
}

這允許我使用“下划線形狀樣式”文本字段。

用法

TextField("placeholder", text: $value).textFieldStyle(BottomLineTextFieldStyle()).foregroundColor(.white)

但是我也想改變占位符的顏色，但我做不到。

所以，我的問題是如何自定義文本字段的占位符顏色？ 請幫助我，感謝您的閱讀。

Answer 1

您還不能更改占位符的默認顏色。 但是，您可以通過使用UITextField或UITextView編寫自定義TextField來實現它。 這是一個示例，我使用UITextView創建了一個自定義TextArea視圖，我可以在其中為占位符設置自定義顏色。 在makeUIView(_:)中查看我的評論

struct TextArea: UIViewRepresentable {
    @State var placeholder: String
    @Binding var text: String

    func makeCoordinator() -> Coordinator {
        Coordinator(self, placeholder: placeholder)
    }

    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.text = placeholder

        // Here you can set the color for placeholder text as per your choice. 
        textView.textColor = .lightGray

        textView.delegate = context.coordinator
        return textView
    }

    func updateUIView(_ textView: UITextView, context: Context) {
        if !text.isEmpty {
            textView.text = text
            textView.textColor = .black
        }
    }

    class Coordinator: NSObject, UITextViewDelegate {
        var textArea: TextArea
        var placeholder: String

        init(_ textArea: TextArea, placeholder: String) {
            self.textArea = textArea
            self.placeholder = placeholder
        }

        func textViewDidBeginEditing(_ textView: UITextView) {
            if textView.textColor == .lightGray {
                textView.text = nil
                textView.textColor = .black
            }
        }

        func textViewDidEndEditing(_ textView: UITextView) {
            if textView.text.isEmpty {
                textView.text = placeholder
                textView.textColor = UIColor.lightGray
            }
        }
    }
}

編輯：

上面的文本區域可以像這樣在視圖中使用：

 TextArea(placeholder: textValue, text: $textValue)

Answer 2

所以，我的問題是如何自定義文本字段的占位符顏色？

不幸的是，目前無法更改標准 TextField 占位符的顏色。 但是可以以某種方式對其進行修改，因此，我認為值得發布

在下面的演示文本字段顏色修改中，密碼是默認的。

struct BottomLineTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        VStack() {
            configuration
                .colorMultiply(.red)
                .foregroundColor(.red)

            Rectangle()
                .frame(height: 1, alignment: .bottom)
                .foregroundColor(.red)
        }
    }
}

Answer 3

一個簡單的 Z Stack 解決了所有占位符問題。

只需在 TextField 后面創建一個 Text() 視圖

你可以用它做任何事情。 顏色、漸變、過渡等

     @State var text = ""

     ZStack {
          
          if text == "" {
           Text("Placeholder of my choice")
           }

           TextField("", text: $text)
            }

Answer 4

SwiftUI 4.0

帶有修飾符和背景的“開箱即用”。

TextField("", text: $name)
    .font(.title2)
    .fontWeight(.medium)
    .frame(height: 55)
    .foregroundColor(.pink)
    .padding(.horizontal)
    .background(
        ZStack{
        Color.white
            if name.count == 0 {
                HStack {
                    Text("Your name here ...")
                    .font(.title2)
                    .fontWeight(.medium)
                        .foregroundColor(.gray)
                        .padding(.horizontal)
                    Spacer()
              }
             .frame(maxWidth: .infinity)
            }
        }
    )
  .cornerRadius(10)

Answer 5

從 iOS 15 開始，無需 hack 即可顯示自定義占位符。 看看額外的提示參數：

@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
public init(_ titleKey: LocalizedStringKey, text: Binding<String>, prompt: Text?)