SwiftUI：如何让TextField完美适配动态给定的Frame？

核心优化方案 #

针对TextField贴合Frame、输入抖动、光标过大、字体缩放模糊的问题，从布局、光标控制、字体渲染三个层面调整：

1. 强制TextField完全填充动态Frame #

移除scaledToFill()，改用frame(maxWidth: .infinity, maxHeight: .infinity)让TextField占满父容器，配合lineLimit(1)限制单行，彻底解决布局抖动：

TextField("", text: .constant("hello here I am"))
    .border(.yellow)
    .font(.system(size: 10))
    .minimumScaleFactor(0.1)
    .lineLimit(1) // 强制单行避免换行错位
    .frame(maxWidth: .infinity, maxHeight: .infinity) // 占满父Frame
    .border(.orange)
    .frame(width: 60, height: 10) // 动态尺寸Frame
    .border(.green)
    .position(x: 180, y: 200)
    .accentColor(.clear)

2. 修复光标过大问题 #

通过自定义UIViewRepresentable封装TextField，精准控制光标高度，替代系统默认光标：

struct CustomTextField: UIViewRepresentable {
    @Binding var text: String
    var targetHeight: CGFloat
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.delegate = context.coordinator
        textField.font = UIFont.systemFont(ofSize: 10)
        textField.minimumFontSize = 1
        textField.adjustsFontSizeToFitWidth = true
        // 自定义适配高度的光标
        let cursor = UIView()
        cursor.backgroundColor = .black // 可自定义颜色
        cursor.frame = CGRect(x: 0, y: (textField.frame.height - targetHeight * 0.8)/2, width: 1, height: targetHeight * 0.8)
        textField.addSubview(cursor)
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        uiView.text = text
        // 光标跟随输入位置更新
        guard let cursor = uiView.subviews.first(where: { $0.backgroundColor == .black }) else { return }
        let caretRect = uiView.caretRect(for: uiView.beginningOfDocument)
        cursor.frame = CGRect(x: caretRect.minX, y: (uiView.frame.height - targetHeight * 0.8)/2, width: 1, height: targetHeight * 0.8)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        var parent: CustomTextField
        init(_ parent: CustomTextField) { self.parent = parent }
        func textFieldDidChangeSelection(_ textField: UITextField) {
            parent.text = textField.text ?? ""
        }
    }
}

// 使用示例
CustomTextField(text: .constant("hello here I am"), targetHeight: 10)
    .border(.yellow)
    .frame(width: 60, height: 10)
    .border(.green)
    .position(x: 180, y: 200)

3. 解决字体缩放模糊问题 #

使用等宽字体+字符收紧优化渲染，避免默认缩放导致的模糊：

TextField("", text: .constant("hello here I am"))
    .border(.yellow)
    .font(Font.system(size: 10, design: .monospaced)) // 等宽字体缩放更清晰
    .minimumScaleFactor(0.1)
    .lineLimit(1)
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .border(.orange)
    .frame(width: 60, height: 10)
    .border(.green)
    .position(x: 180, y: 200)
    .accentColor(.clear)
    .allowsTightening(true) // 允许字符间距收紧，提升缩放清晰度

4. 适配可缩放ScrollView #

在ScrollView缩放回调中，同步更新TextField的字体大小和Frame尺寸，避免缩放错位：

@State private var scale: CGFloat = 1.0

ScrollView {
    TextField("", text: .constant("hello here I am"))
        .border(.yellow)
        .font(.system(size: 10 * scale)) // 同步缩放字体
        .minimumScaleFactor(0.1)
        .lineLimit(1)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .frame(width: 60 * scale, height: 10 * scale) // 同步缩放Frame
        .border(.green)
}
.gesture(MagnificationGesture().onChanged { value in
    scale = value.magnitude
})

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