XCode SwiftUI绘图视图上层添加UITextField及图片缩放问题

1. 修复UITextField的nil错误 #

情况A：通过Storyboard/XIB创建文本框 #

• 打开Storyboard，将UITextField拖到视图控制器的视图上。
• 右键点击文本框，拖拽到DrawingCanvasViewController代码中的@IBOutlet weak var nameTextField: UITextField!，完成IBOutlet连接。
• 删除代码中的view.addSubview(nameTextField)（文本框已通过Storyboard加入视图层级）。
• 保留view.bringSubviewToFront(nameTextField)，确保文本框在画布上层。

情况B：通过代码创建文本框 #

• 替换原有的@IBOutlet声明为懒加载创建：

lazy var nameTextField: UITextField = {
    let tf = UITextField()
    tf.placeholder = "输入名称"
    tf.borderStyle = .roundedRect
    tf.translatesAutoresizingMaskIntoConstraints = false
    return tf
}()

• 在viewDidLoad中添加文本框并设置约束：

view.addSubview(nameTextField)
view.bringSubviewToFront(nameTextField)

// 设置文本框位置（示例：顶部距安全区20，左右各20，高度40）
NSLayoutConstraint.activate([
    nameTextField.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
    nameTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
    nameTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
    nameTextField.heightAnchor.constraint(equalToConstant: 40)
])

2. 修复背景图片缩放问题 #

背景图片视图缺少填充屏幕的约束，导致contentMode无法生效。修改viewDidLoad中的图片视图代码：

let iTest = UIImage(named: "Test2")
let imageView = UIImageView(image: iTest)
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.contentMode = .scaleAspectFit // 按需选择.scaleAspectFill
imageView.clipsToBounds = true // 使用.scaleAspectFill时需开启，防止图片溢出
view.addSubview(imageView)
view.sendSubviewToBack(imageView)

// 添加约束让图片视图填充整个屏幕
NSLayoutConstraint.activate([
    imageView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    imageView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    imageView.topAnchor.constraint(equalTo: view.topAnchor),
    imageView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

3. 正确的视图层级顺序 #

确保视图添加顺序从后到前：背景图 → 绘图画布 → 文本框。修改后的完整viewDidLoad示例（代码创建文本框）：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 1. 添加背景图片
    let iTest = UIImage(named: "Test2")
    let imageView = UIImageView(image: iTest)
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.contentMode = .scaleAspectFit
    imageView.clipsToBounds = true
    view.addSubview(imageView)
    
    // 2. 添加绘图画布
    view.addSubview(canvas)
    canvas.backgroundColor = .clear
    
    // 3. 添加文本框
    view.addSubview(nameTextField)
    view.bringSubviewToFront(nameTextField)
    
    // 统一设置约束
    NSLayoutConstraint.activate([
        // 背景图片约束
        imageView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        imageView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        imageView.topAnchor.constraint(equalTo: view.topAnchor),
        imageView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        
        // 画布约束
        canvas.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        canvas.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        canvas.topAnchor.constraint(equalTo: view.topAnchor),
        canvas.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        
        // 文本框约束
        nameTextField.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
        nameTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
        nameTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
        nameTextField.heightAnchor.constraint(equalToConstant: 40)
    ])
    
    toolPicker.setVisible(true, forFirstResponder: canvas)
    toolPicker.addObserver(canvas)
    canvas.delegate = self
    canvas.becomeFirstResponder()
    if let drawing = try? PKDrawing(data: drawingData) {
        canvas.drawing = drawing
    }
}

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