SwiftUI中TextField文本设置两种不同颜色的可行性咨询

该需求可以实现。原生SwiftUI提供的TextField默认仅支持全局统一的文本样式，无法直接为不同文本片段设置独立颜色，我们可以通过桥接UIKit的UITextField来实现富文本编辑能力，具体实现如下：

具体实现步骤 #

• 第一步：创建桥接UIKit的自定义富文本TextField组件

import SwiftUI
import UIKit

struct AttributedTextField: UIViewRepresentable {
    @Binding var text: String
    let firstWordColor: UIColor
    let secondWordColor: UIColor
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.addTarget(context.coordinator, action: #selector(Coordinator.textDidChange), for: .editingChanged)
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        updateAttributedText(for: uiView)
    }
    
    private func updateAttributedText(for textField: UITextField) {
        let attributedString = NSMutableAttributedString(string: text)
        let words = text.components(separatedBy: .whitespaces).filter { !$0.isEmpty }
        
        guard words.count >= 1 else { return }
        // 第一个单词设置深灰色
        let firstWordRange = (text as NSString).range(of: words[0])
        attributedString.addAttribute(.foregroundColor, value: firstWordColor, range: firstWordRange)
        
        guard words.count >= 2 else { return }
        // 第二个单词设置浅灰色
        let secondWordRange = (text as NSString).range(of: words[1])
        attributedString.addAttribute(.foregroundColor, value: secondWordColor, range: secondWordRange)
        
        // 其余文本可按需自定义颜色，此处省略
        textField.attributedText = attributedString
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        let parent: AttributedTextField
        init(_ parent: AttributedTextField) {
            self.parent = parent
        }
        
        @objc func textDidChange(_ sender: UITextField) {
            parent.text = sender.text ?? ""
        }
    }
}

• 第二步：在SwiftUI视图中调用自定义组件

struct ContentView: View {
    @State private var username = ""
    var body: some View {
        AttributedTextField(
            text: $username,
            firstWordColor: .darkGray,
            secondWordColor: .lightGray
        )
        // 自定义占位符，如需占位符也实现双色效果可修改此处Text的样式
        .placeholder(when: username.isEmpty) {
            Text("Dumble Dore!")
                .foregroundColor(.gray)
        }
        .padding()
        .border(.gray.opacity(0.3), cornerRadius: 8)
        .padding(.horizontal)
    }
}

// 辅助扩展：实现自定义占位符能力
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
        }
    }
}

• 补充说明：如果仅需要占位符实现双色效果，不需要编辑状态下的文本变色，无需桥接UIKit，直接自定义占位符视图即可。

内容的提问来源于stack exchange，提问作者Shahzaib