SwiftUIでは簡単にリストへ値を追加するビューを実装できることを以前紹介したが、その逆で追加した値をリストから削除するボタンを実装することも同じくらい簡単にできるので、今回はそのサンプルコードを紹介していく。

まずは、いくつかの値をListビューへ表示させるコードを書く。
下記の例では最近ハマっているゲーム「AOE3DE」の文明を配列に格納したものを、ForEachを使って出力させている。

01
02
03
04
05
06
07
08
09
10
11
12
13
struct ContentView: View {
    @State var mfgs = [
        "日本", "イギリス", "フランス", "ドイツ", "ロシア", "アステカ", "マヤ"
    ]
     
    var body: some View {
        List {
            ForEach(mfgs, id: \.self) { user in
                Text(user)
            }
        }
    }
}

それではこの文明リストに削除ボタンを実装していく。

ForEachのonDeleteメソッド

onDeleteメソッドはForEachで使えるメソッドで、クロージャ内で削除対象の行を受け取るので、その行を配列のremoveメソッドの引数としてそのまま渡せば良い。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
struct ContentView: View {
    @State var mfgs = [
        "日本", "イギリス", "フランス", "ドイツ", "ロシア", "アステカ", "マヤ"
    ]
     
    var body: some View {
        List {
            ForEach(mfgs, id: \.self) { user in
                Text(user)
            }.onDelete { offsets in
                self.mfgs.remove(atOffsets: offsets)
            }
        }
    }
}

上記のコードを実行し、行を左へスワイプすると削除ボタンが現れ、タップするとリストから行が削除される。