UITableView中UIStepper与UITextField同步及文本重叠问题求助

Hey Marco, let's sort out those two frustrating issues you're dealing with. Both problems come down to not working with UITableView's cell reuse system correctly—let's break this down with a clean, maintainable solution.

Core Problems Explained #

1. Tag Duplication & Misalignment: Your current approach uses incrementing tags to map steppers to text fields, but when cells are reused (or new rows added), tags get out of sync because you never reset them, and reused cells still hold old tags. This makes it impossible to reliably link the right components to the right data row.
2. Text Overlap: Every time cellForRowAt runs, you add a new stepper and text field to the cell's content view. When cells are reused, the old components aren't removed—so you end up stacking new ones on top of old ones, causing the overlap you see.

Step-by-Step Solution #

1. Create a Custom UITableViewCell #

First, we'll build a custom cell that owns its own stepper and text field. This eliminates the need for tags entirely and prevents duplicate subviews.

import UIKit

class BarcodeCell: UITableViewCell {
    // MARK: - UI Components
    let quantityTextField: UITextField = {
        let tf = UITextField()
        tf.keyboardType = .numberPad
        tf.textAlignment = .center
        tf.borderStyle = .roundedRect
        tf.smartInsertDeleteType = .no
        return tf
    }()
    
    let quantityStepper: UIStepper = {
        let stepper = UIStepper()
        stepper.autorepeat = true
        stepper.maximumValue = 99999
        stepper.minimumValue = 1
        stepper.wraps = false
        return stepper
    }()
    
    // MARK: - Closures for Value Changes
    var stepperValueChanged: ((Double) -> Void)?
    var textFieldValueChanged: ((String) -> Void)?
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupLayout()
        setupHandlers()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayout()
        setupHandlers()
    }
    
    // MARK: - Setup
    private func setupLayout() {
        selectionStyle = .none
        
        // Add subviews once, not on every reuse
        contentView.addSubview(quantityTextField)
        contentView.addSubview(quantityStepper)
        
        // Disable auto-resizing masks for auto layout
        quantityTextField.translatesAutoresizingMaskIntoConstraints = false
        quantityStepper.translatesAutoresizingMaskIntoConstraints = false
        
        // Set consistent constraints
        NSLayoutConstraint.activate([
            quantityStepper.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            quantityStepper.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -30),
            quantityStepper.widthAnchor.constraint(equalToConstant: 94),
            
            quantityTextField.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            quantityTextField.trailingAnchor.constraint(equalTo: quantityStepper.leadingAnchor, constant: -15),
            quantityTextField.widthAnchor.constraint(equalToConstant: 60)
        ])
    }
    
    private func setupHandlers() {
        // Stepper value change handler
        quantityStepper.addTarget(self, action: #selector(stepperDidChange), for: .valueChanged)
        
        // Text field editing change handler
        quantityTextField.addTarget(self, action: #selector(textFieldDidChange), for: .editingChanged)
    }
    
    // MARK: - Component Handlers
    @objc private func stepperDidChange() {
        let value = quantityStepper.value
        quantityTextField.text = String(Int(value))
        stepperValueChanged?(value)
    }
    
    @objc private func textFieldDidChange() {
        guard let text = quantityTextField.text, let value = Int(text), value >= 1, value <= 99999 else {
            // Reset to valid value if input is invalid
            quantityTextField.text = String(Int(quantityStepper.value))
            return
        }
        quantityStepper.value = Double(value)
        textFieldValueChanged?(text)
    }
    
    // MARK: - Configure Cell with Data
    func configure(with barcode: barcodeInfo) {
        textLabel?.text = barcode.code
        quantityStepper.value = Double(barcode.quantity)
        quantityTextField.text = String(barcode.quantity)
    }
}

2. Update Your Table View Controller #

Now we'll refactor the view controller to use the custom cell, work directly with the data source, and eliminate tags entirely.

class barcodeInfo: Codable {
    var code = ""
    var quantity = 1
    init(code: String, quantity : Int) {
        self.code = code
        self.quantity = quantity
    }
}

class BarcodeTableViewController: UITableViewController, UITextFieldDelegate {
    var barcodeList = [barcodeInfo]()

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.rowHeight = 50
        // Register the custom cell (skip if using Storyboard with cell class set)
        tableView.register(BarcodeCell.self, forCellReuseIdentifier: "barcodeCell")
        
        // Initialize sample data
        barcodeList = [
            barcodeInfo(code:"test", quantity: 4),
            barcodeInfo(code:"test1", quantity: 10)
        ]
    }

    // MARK: - UITableView Data Source
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return barcodeList.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "barcodeCell", for: indexPath) as! BarcodeCell
        let barcode = barcodeList[indexPath.row]
        
        // Configure cell with latest data
        cell.configure(with: barcode)
        
        // Sync stepper changes to data source
        cell.stepperValueChanged = { [weak self] newValue in
            guard let self = self else { return }
            self.barcodeList[indexPath.row].quantity = Int(newValue)
        }
        
        // Sync text field changes to data source
        cell.textFieldValueChanged = { [weak self] newText in
            guard let self = self, let value = Int(newText) else { return }
            self.barcodeList[indexPath.row].quantity = value
        }
        
        return cell
    }

    // Optional: Example method to add new rows
    @IBAction func addNewRow(_ sender: UIBarButtonItem) {
        let newBarcode = barcodeInfo(code: "newItem\(barcodeList.count + 1)", quantity: 1)
        barcodeList.append(newBarcode)
        let indexPath = IndexPath(row: barcodeList.count - 1, section: 0)
        tableView.insertRows(at: [indexPath], with: .automatic)
    }

    // MARK: - UITextField Delegate (Input Validation)
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        // Allow backspace
        if string == "" { return true }
        // Only allow digits
        guard string.rangeOfCharacter(from: .decimalDigits) != nil else { return false }
        // Limit input to 5 digits
        guard let currentText = textField.text else { return true }
        let newLength = currentText.count + string.count - range.length
        return newLength <= 5
    }
}

Key Improvements Explained #

• No More Tags: The custom cell holds direct references to its own stepper and text field, so we don't need messy tag mappings. Closures pass value changes directly to the view controller, which updates the data source.
• No More Overlap: Components are created once in the cell's initialization, not every time cellForRowAt runs. Reused cells only update their values, not add new subviews.
• Clean Data Flow: All changes sync directly to the barcodeList data source, so cells always reflect the latest state when reused.
• Built-in Validation: Both the text field and stepper enforce valid values (1 to 99999), preventing invalid states.

How to Implement This #

1. Replace your existing barcodeInfo and BarcodeTableViewController code with the above.
2. If using Storyboard:
   • Set your table view cell's class to BarcodeCell
   • Ensure the cell's reuse identifier matches "barcodeCell"
3. If not using Storyboard: The tableView.register call in viewDidLoad handles cell registration automatically.

This setup will fix both your tag duplication and text overlap issues, and make your code much easier to maintain!

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