このインターフェースを簡単に実装する方法を説明します。
Sponsor Link
リスト表示には、List を使います
SwiftUI の List を使うことで、要素をリスト表示することができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
struct ListView: View { var names = ["First", "Second", "Third"] var body: some View { VStack { List(names, id:\.self) { name in Text(name) } .navigationBarTitle("List only") } .padding() } } |
EditMode で、.active になる必要があります
編集モードにするためには、.environment の .EditMode を設定する必要があります。
SwiftUI には、EditButton という要素が用意されていて、そのボタンを表示することで、ユーザー操作で切り替えることができます。
# NavigationBar に表示するために、親ビューで NavigationView を指定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
struct ListView: View { @State var names = ["First", "Second", "Third"] var body: some View { VStack { List(names, id:\.self) { name in Text(name) } .navigationBarTitle("List only") } .navigationBarItems(trailing: EditButton()) .padding() } } |
List と EditButton では不十分
動作を確認してみると、Edit ボタンを押しても、何も変わらないことがわかります。
期待しているのは、Edit ボタンを押すことで、以下のように、各行の左側に、削除マークが表示されることです。
ForEach
このインターフェースを手軽に実装するには、List の中で、ForEach を使って表示していることが必要となります。
具体的には、ForEach のもつ、onDelete を実装している必要があります。
ForEach を List の内側でネストさせ、ForEach に対して onDelete を実装することで、削除のための UI が表示されるようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
struct ListForEachView: View { @State var names = ["First", "Second", "Third"] var body: some View { VStack { List { ForEach(names, id: \.self) { name in Text(name) } .onDelete(perform: { indexSet in names.remove(at: indexSet.first!) }) } .navigationBarTitle("Names") } .navigationBarItems(trailing: EditButton()) .padding() } } |
このように、ForEach と onDelete を組み合わせることで、標準的な削除インターフェースを組み込むことができます。
サンプルコード
以下のコードで、実際に試すことができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
// // ContentView.swift // EditMode // // Created by Tomoaki Yagishita on 2020/10/08. // import SwiftUI struct ContentView: View { var body: some View { NavigationView { VStack { NavigationLink("List View", destination: ListView()) .padding() NavigationLink("List with ForEach View", destination: ListForEachView()) .padding() } .padding() } } } struct ListView: View { @State var names = ["First", "Second", "Third"] var body: some View { VStack { List(names, id:\.self) { name in Text(name) } .navigationBarTitle("List only") } .navigationBarItems(trailing: EditButton()) .padding() } } struct ListForEachView: View { @State var names = ["First", "Second", "Third"] var body: some View { VStack { List { ForEach(names, id: \.self) { name in Text(name) } .onDelete(perform: { indexSet in names.remove(at: indexSet.first!) }) } .navigationBarTitle("Names") } .navigationBarItems(trailing: EditButton()) .padding() } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } |
まとめ
- ForEach を使った List 表示を行う
- EditButton を使った .environment の .EditMode を使用した編集モードを使用する
- onDelete を実装する
説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。
SwiftUI本
SwiftUI で開発していくときに、ViewやLayoutのための適切なmodifierを探すのが大変です。
以下の”SwiftUI Views Mastery Bundle”という本がビジュアル的に確認して探せるので、超便利です。
Sponsor Link