SwiftUI 如何实现TextField输入时字母显红色、数字显黑色

实现方案 #

这里提供一个无需接触UIKit、兼容性强的纯SwiftUI实现方式，核心思路是用ZStack堆叠两层控件，上层透明TextField负责接收输入，底层Text负责展示带自定义颜色的富文本内容。

第一步：在ViewModel中添加富文本处理逻辑 #

给你的ViewModel新增一个计算属性，实时根据输入的字符串生成对应颜色的富文本：

import SwiftUI

class ViewModel: ObservableObject {
    @Published var code = ""
    
    // 实时生成带样式的富文本
    var attributedCode: AttributedString {
        var result = AttributedString(code)
        for (index, character) in code.enumerated() {
            // 定位当前字符对应的富文本范围
            let charRange = result.index(result.startIndex, offsetByCharacters: index)..<result.index(result.startIndex, offsetByCharacters: index + 1)
            if character.isLetter {
                // 字母设置为红色
                result[charRange].foregroundColor = .red
            } else if character.isNumber {
                // 数字设置为黑色
                result[charRange].foregroundColor = .black
            }
            // 其他字符可在此处自定义规则
        }
        return result
    }
}

第二步：修改页面布局代码 #

把原来的TextField替换成ZStack堆叠的两层控件：

ZStack(alignment: .trailing) {
    // 底层展示带颜色的文本
    Text(viewModel.attributedCode)
        .opacity(viewModel.code.isEmpty ? 0 : 1) // 输入为空时隐藏，透出TextField的占位符
    
    // 上层接收用户输入的透明TextField
    TextField(
        "A99",
        text: $viewModel.code
    )
    .foregroundColor(.clear)
    .multilineTextAlignment(.trailing)
}
.padding(.trailing)

说明 #

• 该方案兼容iOS 15及以上系统，不需要调用任何UIKit接口，逻辑清晰易维护。
• 如果需要适配更低的iOS版本，只需要把AttributedString替换成NSAttributedString，同时把Text的内容改成Text(nsAttributedString)即可。
• 后续如果需要调整字符的样式规则，只需要修改attributedCode计算属性中的逻辑即可，不需要修改布局代码。

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