Не удается снять флажок при прокрутке tableView

Question

Я пытаюсь сделать кнопку галочки в tableViewCell. Изображение галочки будет скрыто / показано, когда пользователь нажмет на кнопку галочки. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что кнопка галочки ведет себя странно, когда я прокручиваю табличное представление, и мне нужно дважды нажать, чтобы отменить выбор галочки.

Когда я не прокручиваю tableView, он отлично работает. Ниже приведены видео и код. Заранее спасибо.

https://youtu.be/cQBIuIXJlRY

    func tableView(_ tableView: UITableView, cellForRowAt 
   indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "dtvc") as! DeviceTableViewCell

    let scannedDevice = devices[indexPath.row]

    // Set the tag & addTarget for addButton
    cell.addButton.addTarget(self, action: #selector(addButtonTapped), for: .touchUpInside)
    cell.addButton.isEnabled = true
    cell.addButton.tag = indexPath.row

    cell.configureCell(with: scannedDevice)
    cell.isSelected = checked[indexPath.row] ?? false
    print("cell isSelected at \(indexPath.row) cellForRow \(cell.isSelected)")
    print("checked value at \(indexPath.row) is \(checked[indexPath.row])")

    if checked[indexPath.row] == true {
        cell.deviceMake.textColor = UIColor.white
        cell.backgroundColor = UIColor(red: 233/255, green: 72/255, blue: 85/255, alpha: 1)
        cell.addButton.setImage(UIImage(named: "Checkmark"), for: .normal)
        cell.addButton.bgColor = UIColor.green

    } else {
        cell.deviceMake.textColor = UIColor.gray
        cell.backgroundColor = UIColor.clear
        cell.addButton.setImage(nil, for: .normal)
        cell.addButton.bgColor = UIColor(red: 233/255, green: 72/255, blue: 85/255, alpha: 1)
    }

    return cell

}


@objc func addButtonTapped(_ sender: UIButton) {

    let indexPath = IndexPath(row: sender.tag, section: 0)
    let scannedDevice = devices[sender.tag]

    let cell = tableView.cellForRow(at: indexPath) as! DeviceTableViewCell
    cell.isSelected = !cell.isSelected

    print("cell.isSelected is at button \(sender.tag) tapped is \(cell.isSelected)")

    if cell.isSelected == true {
    // Main color RGB is  233,72,85 ... hex is E94855
        cell.deviceMake.textColor = UIColor.white
        cell.backgroundColor = UIColor(red: 233/255, green: 72/255, blue: 85/255, alpha: 1)
        cell.addButton.setImage(UIImage(named: "Checkmark"), for: .normal)
        cell.addButton.bgColor = UIColor.green
        checked[sender.tag] = cell.isSelected
        print("Checked 1 at tag \(sender.tag) is \(checked[sender.tag])")

        //show selectedDeviceView
        if selectedDeviceView.isHidden {
            UIView.animate(withDuration: 2.5, delay: 0.7, options: .curveEaseInOut, animations: {
                self.tableViewHeightConstraint.constant = self.tableViewHeightConstraint.constant - self.selectedDeviceViewTopConstraint.constant - self.selectedDeviceView.frame.height
                self.selectedDeviceViewTopConstraint.constant = 0
                self.selectedDeviceView.isHidden = false
            }, completion: nil)
        }

    }
    else {
        cell.deviceMake.textColor = UIColor.gray
        cell.backgroundColor = UIColor.clear
        cell.addButton.setImage(nil, for: .normal)
        cell.addButton.bgColor = UIColor(red: 233/255, green: 72/255, blue: 85/255, alpha: 1)
        checked[sender.tag] = cell.isSelected
        print("Checked 2 at tag \(sender.tag) is \(checked[sender.tag])")


    }

}

Answer 1

Прежде всего, поместите выбранное состояние в класс / структуру устройства, а не используйте дополнительный массив

class Device {
    var isSelected = false

...

Во-вторых, не думайте с точки зрения view думайтес точки зрения модель .Это означает переключение isSelected в модели и перезагрузку строки.Преимущество заключается в том, что представление надежно обрабатывается только в cellForRow.

Например

@objc func addButtonTapped(_ sender: UIButton) {

    let indexPath = IndexPath(row: sender.tag, section: 0)
    devices[indexPath.row].isSelected.toggle()
    self.tableView.reloadRows(at: [indexPath], with: .none)
    if devices[indexPath.row].isSelected && selectedDeviceView.isHidden {
        UIView.animate(withDuration: 2.5, delay: 0.7, options: .curveEaseInOut, animations: {
            self.tableViewHeightConstraint.constant = self.tableViewHeightConstraint.constant - self.selectedDeviceViewTopConstraint.constant - self.selectedDeviceView.frame.height
            self.selectedDeviceViewTopConstraint.constant = 0
            self.selectedDeviceView.isHidden = false
        }, completion: nil)
    }
}

И в cellForRow изменить

cell.isSelected = scannedDevice.isSelected