SwiftUI封装UITextField输入满格时文字溢出框外如何解决？

问题根因 #

你遇到的文本溢出到输入框左侧外部的问题，本质是居中对齐的UITextField在文本总宽度超过输入框可显示宽度时，文本会向左右两侧等距溢出。你之前开启clipsToBounds/masksToBounds未生效，是因为未同时配置UITextField的内边距和文本自适应规则，文本绘制时会顶到输入框边缘直接溢出。

可行修复方案 #

方案1（优先推荐）：增加内边距+开启文本自适应缩小 #

同时给输入框增加左右内边距避免文本顶边，开启自动缩小字号适配宽度，修改MyCustomTextField的makeUIView方法即可：

func makeUIView(context: Context) -> UITextField {
    let textField = UITextField(frame: .zero)
    // 开启溢出裁剪
    textField.clipsToBounds = true
    textField.layer.masksToBounds = true
    // 新增左右内边距，避免文本直接贴到输入框边缘
    let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: 8, height: textField.frame.height))
    textField.leftView = paddingView
    textField.leftViewMode = .always
    textField.rightView = paddingView
    textField.rightViewMode = .always
    // 新增文本超出时自动缩小适配，最小字号可根据业务调整
    textField.adjustsFontSizeToFitWidth = true
    textField.minimumFontSize = 14

    textField.delegate = context.coordinator
    textField.textColor = .black
    textField.placeholder = self.placeholderText
    textField.textAlignment = .center
    // 建议把font设置移到初始化逻辑，不要每次update都重置
    textField.font = UIFont(name: "Arial", size: 20)
    return textField
}

同时删除updateUIView里重复设置font的代码，避免重复触发布局刷新：

func updateUIView(_ uiView: UITextField, context: UIViewRepresentableContext<MyCustomTextField>) {
    uiView.text = text
}

方案2：限制输入最大字符数 #

如果业务场景不允许缩小字号，可以通过代理方法限制输入字符长度，避免文本宽度超出输入框：
在Coordinator中实现UITextFieldDelegate的输入拦截方法：

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
    let currentText = textField.text ?? ""
    guard let stringRange = Range(range, in: currentText) else { return false }
    let updatedText = currentText.replacingCharacters(in: stringRange, with: string)
    // 最大长度可根据你的输入框宽度、字号自行计算调整
    return updatedText.count <= 15
}

方案3：自定义文本绘制范围 #

如果既不能缩小字号也不能限制输入长度，可以自定义UITextField子类，固定文本的绘制区域，强制裁剪溢出内容：
首先新增自定义UITextField子类：

class CustomUITextField: UITextField {
    // 非编辑状态下的文本绘制范围，左右各缩进8px，可自行调整
    override func textRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.insetBy(dx: 8, dy: 0)
    }
    // 编辑状态下的文本绘制范围
    override func editingRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.insetBy(dx: 8, dy: 0)
    }
}

然后在makeUIView中将初始化的控件替换为自定义子类即可：

let textField = CustomUITextField(frame: .zero)

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