滚动时 TableViewCell 中的 Swift 3 UISwitch 丢失状态

Question

这很奇怪：我刚刚建立了一个新的 Single-View iOS 项目并将一个 TableView 放入 Main.storyboard。在这个 TableView 中，我放置了一个 TableViewCell，在这个 Cell 中，我放置了一个 UILabel 和一个 UISwitch。 对于这个 TableViewCell，我创建了一个 CocoaTouchClass MyTableViewCell 并在 Interfacebuilder 中为 TableViewCell 的类设置它。 我将 UILabel 和 UISwitch 的 Outlets 连接到 MyTableViewCell，以及开关的操作。 我还连接了 TableView 的数据源并委托给 ViewController。

所以，我认为，设置表格的基本内容。

我的 ViewController 看起来像这样：

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

var tableData = [[String: Bool]]()

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    for index in 1...40 {
        self.tableData.append([String(index): index%2 == 0])
    }
}

func numberOfSections(in tableView: UITableView) -> Int {
    return 1
}

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


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

    let cell = tableView.dequeueReusableCell(withIdentifier: "mycell", for: indexPath) as! MyTableViewCell
    let object = tableData[indexPath.row].first!

    cell.myLabel.text = object.key
    cell.mySwitch.setOn(object.value, animated: false)

    return cell
}

}

所以，我用一些数据行填充表格，并每隔一秒将 UISwitch 切换为 on。

MyTableViewCell-Class 也没什么特别的：

class MyTableViewCell: UITableViewCell {
@IBOutlet weak var myLabel: UILabel!
@IBOutlet weak var mySwitch: UISwitch!

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
}

@IBAction func switched(_ sender: UISwitch) {
    print("Switched: \(sender.isOn)")
}

}

好的，启动 iOS 模拟器，我看到了预期的表格。 40 条 Table-Lines 无法在一个屏幕上显示，因此 TableView 可以自行滚动。

现在：当我更改一个 UISwitch 的状态并拖动 TableView 使更改后的 UISwitch 消失，然后拖动 TableView 使更改后的 UISwitch 再次可见时，它会更改回其初始状态。 Switch 事件按原样触发。

那么，我做错了什么？我错过了什么吗？

我录制了一个 4 秒的屏幕录像来演示发生了什么： http://b-bereich.de/download/swiftSwitch.mov

Answer 1

TableViewCell 被重复使用。

这意味着您需要跟踪用于填充单元格内容的数据。如果单元格内容发生变化 - 例如当您点击单元格中的 Switch 时 - 您需要更新您的 数据源。当您滚动时，该行再次显示，您的数据将知道如何设置 Switch 的状态。

这是一个简单的例子：

//
//  TableWithSwitchTableViewController.swift
//  SWTemp2
//
//  Created by Don Mag on 6/5/17.
//  Copyright © 2017 DonMag. All rights reserved.
//

import UIKit

class MyTableViewCell: UITableViewCell {
    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var mySwitch: UISwitch!

    var switchTapAction : ((Bool)->Void)?

    @IBAction func switched(_ sender: UISwitch) {
        print("Switched: \(sender.isOn)")

        // send the Switch state in a "call back" to the view controller
        switchTapAction?(sender.isOn)
    }
}

// simple data object
class MyObject: NSObject {
    var theTitle = ""
    var theSwitchState = false

    init(_ title: String) {
        theTitle = title
    }
}

class TableWithSwitchTableViewController: UITableViewController {

    // array of MyObjects
    var myData = [MyObject]()

    override func viewDidLoad() {
        super.viewDidLoad()

        // just to make it a little easier to see the rows scroll
        tableView.rowHeight = 60

        // create 40 data objects for the table
        for i in 1...40 {
            let d = MyObject("Data Item: \(i)")
            myData.append(d)
        }

        tableView.reloadData()

    }

    // MARK: - Table view data source
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

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

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "SwitchCell", for: indexPath) as! MyTableViewCell

        // Configure the cell...
        let d = myData[indexPath.row]
        cell.myLabel.text = d.theTitle
        cell.mySwitch.isOn = d.theSwitchState

        // set a "Callback Closure" in the cell
        cell.switchTapAction = {
            (isOn) in
            // update our Data Array to the new state of the switch in the cell
            self.myData[indexPath.row].theSwitchState = isOn
        }

        return cell
    }


}

Answer 2

我认为每次翻转开关时都需要让 IBAction 更改 Bool。目前，该开关会更改 UI，但不会更改底层 Bool，因此当单元格回滚到屏幕上时，cellForRowAt 方法会使用当前保存的值。

Answer 3

在您的自定义单元类中添加函数 prepareForReuse() 并将开关状态默认设置为关闭。 -：

 class MyTableViewCell: UITableViewCell {
    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var mySwitch: UISwitch!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

    @IBAction func switched(_ sender: UISwitch) {
        print("Switched: \(sender.isOn)")
    }

    override func prepareForReuse(){
    // SET SWITCH STATE OFF HERE
    }