使用 SwiftUI 創建手勢以編輯列表項

Question

我正在嘗試使用 SwiftUI 實現滑動（從左到右）來編輯操作。 刪除操作（從右向左滑動）和移動項目操作完美運行。

我想打開左邊到右邊的編輯屏幕

這是我的代碼：

struct TableView : View {
@State var dataSource = DataSource()

var body: some View {
        NavigationView {
            List {
                ForEach(dataSource.pokemons.identified(by: \.id)) { pokemon in
                    Text(pokemon.name) 
                }
                .onDelete(perform: deletePokemon)
                .onMove(perform: movePokemon)
            }
            .navigationBarItems(leading: EditButton(), trailing: Button(action: addPokemon, label: { Text("Add") }))
            .navigationBarTitle(Text("Pokemons"))
        }
}

Answer 1

我認為目前不可能。

我的最佳建議是通過UIViewRepresentable協議使用UITableView推出您自己的解決方案。 話雖如此，那里可能有可行的開源解決方案。

我認為希望擁有您可能想要的所有UITableView功能是有風險的，因為List應該是跨各種平台支持的“通用”類型。 UITableView某些功能可能永遠不會出現在List 。

這是我輸入的快速代碼，但它提供了一個如何創建自定義UITableView解決方案的簡單示例：

RoutineTableView(routines: routineDataSource.routines)
  .trailingSwipeActionsConfiguration {
    let editAction = UIContextualAction(
      style: .normal,
      title: "EDIT"
    ) { (action, sourceView, completionHandler) in

      completionHandler(true)
    }
    editAction.backgroundColor = UIColor.darkGray
    let deleteAction = UIContextualAction(
      style: .destructive,
      title: "DELETE"
    ) { (action, sourceView, completionHandler) in

      completionHandler(true)
    }
    let actions = [deleteAction, editAction]
    let configuration = UISwipeActionsConfiguration(actions: actions)
    return configuration
  }
  .onCellPress {
    print("hi there")
  }
  .navigationBarTitle("Routines")

private class CustomDataSource<SectionType: Hashable, ItemType: Hashable>: UITableViewDiffableDataSource<SectionType, ItemType> {

  override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
    return true
  }
}

struct RoutineTableView: UIViewRepresentable {

  let routines: [Routine]
  private var onCellPress: (() -> Void)? = nil
  private var trailingSwipeActionsConfiguration: (() -> UISwipeActionsConfiguration)? = nil

  init(routines: [Routine]) {
    self.routines = routines
  }

  func makeUIView(
    context: UIViewRepresentableContext<RoutineTableView>
  ) -> UITableView {
    let tableView = UITableView()
    context.coordinator.update(withTableView: tableView)
    return tableView
  }

  func updateUIView(_ uiView: UITableView, context: UIViewRepresentableContext<RoutineTableView>) {
    context.coordinator.update(routines: routines)
  }

  // MARK: - Coordinator

  func makeCoordinator() -> RoutineTableView.Coordinator {
    return Coordinator(self)
  }

  class Coordinator: NSObject, UITableViewDelegate {

    private enum Section {
      case first
    }

    private let view: RoutineTableView
    private var dataSource: UITableViewDiffableDataSource<Section, Routine>?

    init(_ view: RoutineTableView) {
      self.view = view
      super.init()
    }

    func update(withTableView tableView: UITableView) {
      tableView.register(RoutineTableViewCell.self)
      tableView.delegate = self

      let dataSource = CustomDataSource<Section, Routine>(tableView: tableView) { (tableView, indexPath, routine) -> UITableViewCell? in
        let cell: RoutineTableViewCell = tableView.dequeueReusableCell(for: indexPath)
        cell.configure(withRoutine: routine)
        return cell
      }
      self.dataSource = dataSource
    }

    func update(routines: [Routine]) {
      var snapshot = NSDiffableDataSourceSnapshot<Section, Routine>()
      snapshot.appendSections([.first])
      snapshot.appendItems(routines)
      dataSource?.apply(snapshot, animatingDifferences: true)
    }

    // MARK: - <UITableViewDelegate>

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
      view.onCellPress?()
    }

    func tableView(
      _ tableView: UITableView,
      trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath
    ) -> UISwipeActionsConfiguration? {
      return view.trailingSwipeActionsConfiguration?()
    }

  }
}

extension RoutineTableView {

  func onCellPress(
    _ onCellPress: @escaping () -> Void
  ) -> RoutineTableView {
    var view = self
    view.onCellPress = onCellPress
    return view
  }

  func trailingSwipeActionsConfiguration(
    _ trailingSwipeActionsConfiguration: @escaping () -> UISwipeActionsConfiguration
  ) -> RoutineTableView {
    var view = self
    view.trailingSwipeActionsConfiguration = trailingSwipeActionsConfiguration
    return view
  }
}

Answer 2

您必須改用 EditButton()。 它為 List 組件啟用編輯模式。

Answer 3

哇！ 嗯，我不確定是否使用 EditButton() ！

我假設您有一個列表，並且想要滑動該行並查看刪除選項，對嗎？

您所要做的就是在 List 關閉后實現.onDelete(perform: delete) 。 然后，向結構中添加一個函數，該函數定義了您在其中處理閉包的刪除函數。 請記住，該函數將定義為： func delete (at offsets: IndexSet) {}

添加我建議的內容並在沒有完成函數體的情況下進行編譯（即添加一個 print() 占位符），您可以看到刪除的滑動行為。

Answer 4

iOS 15

從 iOS 15 開始，您可以使用swipeActions ：

ForEach(dataSource.pokemons.identified(by: \.id)) { pokemon in
    Text(pokemon.name)
}
.swipeActions(edge: .leading) {
    Button("Edit") {
        print("Edit")
    }
    .tint(.blue)
}
.swipeActions(edge: .trailing) {
    Button("Delete", role: .destructive) {
        print("Delete")
    }
    Button("Flag") {
        print("Flag")
    }
    .tint(.orange)
}