[SwiftUI] リストアイテムを常に移動可能にする

SwiftUI において、リストに登録したリストアイテムを移動する View を実装したかったのですが、 toolbar の EditButton を用いる実装では都度 Edit ボタンをクリックする必要があり、その手間を省けないかと思いました。実装してみれば簡単なのですが、あまりサンプルも見つからなかったた事もあり、本記事で整理してみます。

Xcode: 12.4
Swift: 5

はじめに SwiftUI でリストを実装

[ads]

まずは、単純なリストを実装するところから始めます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        SampleList()
    }
}

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {
        ContentView()
    }
}

ContentView.swift

単純に5つのアイテムを生成し、リストに表示するシンプルなリストです。

SampleList.swift

struct SampleList: View {

    struct Item: Identifiable {
        let id = UUID()
        let title: String
    }

    @State private var items: [Item] = (0..<5).map { Item(title: "Item #\($0)") }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    Text(item.title)
                }
            }
        }
    }
}

EditButton を用いて、リストアイテムを移動する

[ads]

まずは、EditButton を用いた実装を紹介します。なお、ここで NavigationView を追加していますが、追加せずとも動作するはずです。

以下のサイトを参考に、下記を追記しています。

move function を定義
リストアイテムの onMove の Perform アクションの Closure として指定
リストの Modifier に toolbar を追加し、要素として EditButton を追加

EditButton | Apple Developer Documentation

A button that toggles the edit mode environment value.

SampleList.swift

struct SampleList: View {

    struct Item: Identifiable {
        let id = UUID()
        let title: String
    }

    @State private var items: [Item] = (0..<5).map { Item(title: "Item #\($0)") }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    Text(item.title)
                }
                .onMove(perform: move)
            }
            .navigationTitle("Navigation Title")
            .toolbar {
                EditButton()
            }
        }
    }
    
    private func move(source: IndexSet, destination: Int) {
        items.move(fromOffsets: source, toOffset: destination)
    }
}

Editボタンをクリックすることで、編集モードになり、リストが移動できるようになります。

リストアイテムを常に移動できるようにする

[ads]

UI によっては、都度 Edit ボタンをクリックするのが煩雑な場合もあるかと思います。
次に紹介するのは、リストのアイテムが常に移動できるようになるサンプルです。

以下のサイトを参考に、以下を実装します。

リストの environment Modifier の中で、 EditMode.active を指定

https://developer.apple.com/documentation/swiftui/environmentvalues
https://developer.apple.com/documentation/swiftui/editmode

SampleList.swift

struct SampleList: View {

    struct Item: Identifiable {
        let id = UUID()
        let title: String
    }

    @State private var items: [Item] = (0..<5).map { Item(title: "Item #\($0)") }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    Text(item.title)
                }
                .onMove(perform: move)
            }
            .navigationTitle("Navigation Title")
            .environment(\.editMode, .constant(EditMode.active))
        }
    }
    
    private func move(source: IndexSet, destination: Int) {
        items.move(fromOffsets: source, toOffset: destination)
    }
}

このように、 Edit ボタンをクリックすることなく、リストのアイテムが常に移動可能となります。