【SwiftUI】Listの行削除

Listからスワイプでの行削除を実現する方法を解説します。

【図1:Listの行削除】

スポンサーリンク

環境

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

【Xcode】11.1
【Swift】5.1
【iOS】13.1.3
【macOS】Catalina バージョン 10.15

サンプルソース

はじめにサンプルソースを示します。

サンプルソースの解説

Listに表示するアイテムの配列fruitsを宣言しています。
先頭に@Stateがついている事で、この配列の変更がSwiftUIの監視対象となり、変更があった時に対象のViewが再描画されるようになります。
つまり、配列の要素が削除されると、連動してList表示からも削除される事になります。

Listの各行を表示する部分です。
あえてListの中でForEachを使っているのは、後ろのView修飾子.onDelete()を使う為です。
Listに直接.onDelete()は使えません。

また、配列fruitsはIdentifiableプロトコルに準拠していない為、各要素を特定する為のidを”\.self”として定義します。

ForEachのView修飾子です。
これによって、行スワイプで削除ボタンが表示されるようになります。

そして、削除ボタンがタップされるとperfom: で指定されたdelete()ファンクションが実行されます。
実行されるファンクションは”(IndexSet) -> Void”という形式です。

引数のIndexSetはコレクションの対象範囲を示す情報を示す構造体で、この場合は削除対象行のインデックス情報が渡ります。

先程の.onDeleteから呼ばれるファンクションの定義です。
配列fruitsから対象行を削除します。

この章のはじめで解説したように、配列fruitsはSwiftUIに監視されており、要素の削除が実行されると対象となるListの行も削除されます。

最後に

以上で、解説を終わります。

SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント