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

Question

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

所以，正如我所想，摆 table 的基本东西。

我的 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 切换为打开状态。

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 条表格行无法显示在一个屏幕上，因此 TableView 使其自身可滚动。

现在:当我更改一个 UISwitch 的状态并拖动 TableView 以使更改后的 UISwitch 离开 View ，然后拖动 TableView 以使更改后的 UISwitch 再次可见时，它会变回其初始状态。Switch 事件被触发。

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

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

Answer 1

TableViewCells 被重用。

这意味着您需要跟踪用于填充单元格内容的数据。如果单元格内容发生变化 - 例如当您点击单元格中的开关时 - 您需要更新您的数据源。当您滚动并再次显示该行时，您的数据将知道如何设置 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
    }


}