【SwiftUI】Listの行削除

(2021/09/26 更新)

Listで生成したデータ一覧の行削除処理について解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】13.0
【Swift】5.5
【iOS】15.0
【macOS】Big Sur バージョン 11.6
スポンサーリンク

前提条件

行削除ができるのは、次の条件を満たしたリストです。

  1. リストに関連付けられたコレクション(配列)が、@State等で宣言されており、更新可能である。
  2. List + ForEach でリストが生成されている。
    →行削除処理はForEachのModifierを使って実現します。
  3. ForEachは範囲指定ではなくid指定による繰り返し。
    →各行の一意性が確保されている必要があります。

UntitledImage

スポンサーリンク

行削除処理の追加

ForEachの ModifierであるonDelete()で行削除時に呼び出すメソッドを指定します。
呼び出し方は"(削除対象:IndexSet) -> Void"の形式になります。

呼び出されるメソッド(rowRemove)には、コレクション(配列)から要素を削除する処理を記述します。
この中で使用しているremove(atOffsets:)は、RangeReplaceableCollectionプロトコルで宣言されている,
iOS13以降でのみ使用可能なメソッドです。

UntitledImage

対象行をスワイプするだけで、行削除が可能になります。

スポンサーリンク

編集モードの切り替えボタン追加

リストを編集モードに切り替えると、スワイプとは異なる操作で行削除が行えます。
以下は編集モードの切り替えをするEditButtonをナビゲーションボタンとして配置した例です。

Editボタンを押して編集モードにすると、次のようにタップで削除行を選べるようになります。

UntitledImage

スポンサーリンク

スワイプによる削除を止める

スワイプによる操作はユーザーが意図せず行を削除してしまう可能性が少なからずあります。
スワイプによる削除を止めて、編集モードでのみ削除できるようにする方法を紹介します。

以下は環境変数のeditModeを参照し、編集モードの場合のみ削除機能を有効にする例です。
編集モードで無い場合は、.onDelete()にnilを渡して削除処理を無効にしています。

NavigationViewで編集モードが取得できない問題がある為、独自に編集モードを保持するeditModeプロパティを環境変数に設定しています。
編集モードとNavigationの関係については、こちらの記事を参照してください。

【SwiftUI】編集モードの取得に関する問題
(2021/09/26 更新)NavigationViewでの編集モード(editMode)取得に関する問題についてまとめました。
スポンサーリンク

あわせて読みたい記事

【SwiftUI】Listの使い方
(2021/09/26 更新)Listはデータの一覧表示をするのに適したViewです。画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。ListはForEa...
【SwiftUI】Listの行入れ替え
(2021/09/28 更新)Listの行入れ替え処理の実現方法について解説します。
【SwiftUI】選択可能なListの生成
選択可能なListを生成する方法を解説します。