SwiftUIでいこう!-List!..4-2
上記サイトを参考にコードを確認しながら書いていきます。前回で表示部分ができたので、次にデータの操作をやっていきます。削除、移動、"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
で数字が加算されて表示されます。
この記事が気に入ったらサポートをしてみませんか?