SwiftUIでいこう！-List!..4-2

Add, Edit, Move, and Drag and Drop List Rows with SwiftUI

上記サイトを参考にコードを確認しながら書いていきます。前回で表示部分ができたので、次にデータの操作をやっていきます。削除、移動、"drag-and-drop"ができるようにコードを追加していきます。

基本的なコードです。struct DemoList: View{}を編集していきます。

var body: some View {}のみ抜き出します。他、付随するコードなどは上記サイトなどを参考にしてください。

var body: some View {
       NavigationView {
           List {
               ForEach(items) { item in
                   Text(item.title)
               }
  
           .navigationBarTitle("List")
           .navigationBarItems(leading: EditButton(), trailing: addButton)
           .environment(\.editMode, $editMode)
       }
   }

このコードで、ナビゲーションがついたUIが出来上がります。

ここにまず、削除".onDelete"とリストの上下移動できる"onMove"のコードを付け加えます。

.onDelete(perform: onDelete)
.onMove(perform: onMove)

付け加える場所は

List {
               ForEach(items) { item in
                   Text(item.title)
               }
               .onDelete(perform: onDelete)
               .onMove(perform: onMove)
}

Listの中、ForEachの後です。そして

(perform: onDelete)、(perform: onMove)はそれぞれ  関数

 "onDelete"、"onMove" 

を指定していることを示していますのでこの関数を作っていきます。

 private func onDelete(offsets: IndexSet) {
       items.remove(atOffsets: offsets)
   }

   private func onMove(source: IndexSet, destination: Int) {
       items.move(fromOffsets: source, toOffset: destination)
   }

削除、移動ができるコードを追加しましたが、もう一つ"drag-and-drop"も追加します。コードは

.onInsert(of: [String(kUTTypeURL)], perform: onInsert)

となります。先ほどの削除、移動のコードの下にコードを書きます。

そして、関数"onInsert"も追加します。

   private func onInsert(at offset: Int, itemProvider: [NSItemProvider]) {
       for provider in itemProvider {
           if provider.canLoadObject(ofClass: URL.self) {
               _ = provider.loadObject(ofClass: URL.self) { url, error in
                   DispatchQueue.main.async {
                       url.map { self.items.insert(Item(title: $0.absoluteString), at: offset) }
                   }
               }
           }
       }
   }

最後にもう一つ実装しないといけないものがあります。前回には

func onAdd() {
// To be implemented in the next section
}

としていたところですが、

  private func onAdd() {
       items.append(Item(title: "Item #\(Self.count)"))
       Self.count += 1
   }

として"+"ボタンを押すと、

"Item #\(Self.count)"

ということで\(Self.count)でこの場合は

Self.count += 1

で数字が加算されて表示されます。