【SwiftUI】Viewの編集モードを切り替える方法

iOS	13.0以上
XCode(当サイトの環境)	15.0.1

SwiftUIではEditModeというViewにおけるコンテンツの編集可否を示す環境値があります。

@EnvironmentによりEditModeの値を取得することができます。
取得の際の具体的な記述方法は下記の通りです。

@Environment(\.editMode) private var editMode

EditModeを利用することで何ができるのか？
1. ListViewでの活用
2. 自分で編集可否を切り替えられるテキストフィールドを作成

EditModeを利用することで何ができるのか？

先述した通りViewの編集可否を切り替えることが可能です。

ListViewでの活用

Listなど特定のビューにおいては、動作と外観を自動的に制御してくれます。
例えばListにonDeleteやonMoveを使用すると、EditButtonを押すと編集可能なモードとなり、リストからデータを削除したり移動させたりできます。

import SwiftUI

struct EditMode1: View {
    @State var sampleArray: [String] = ["apple", "orange", "banana"]
    var body: some View {
        //リストを表示
        VStack {
            //エディットボタンでEditModeを切り替え可能
            EditButton()
            List {
                ForEach(0..<sampleArray.count, id: \.self) { index in
                    HStack {
                        Text(sampleArray[index])
                    }
                }
                .onDelete(perform: deleteItem)
                .onMove(perform: moveItem)
            }
        }
    }
    private func deleteItem(offsets: IndexSet) {
        //指定したオフセットの値を配列から削除
        sampleArray.remove(atOffsets: offsets)
    }
    private func moveItem(from: IndexSet, to: Int) {
        //リストの並び替え
        sampleArray.move(fromOffsets: from, toOffset: to)
    }
}

自分で編集可否を切り替えられるテキストフィールドを作成

EditModeを利用して、独自のViewを作成することも可能です。
以下は編集可否を切り替えられるテキストフィールドを作成しています。

import SwiftUI
struct EditMode2: View {
    //編集可否を取得
    @Environment(\.editMode) var editMode
    @State var input: String = "input"
    var body: some View {
        HStack {
            Spacer()
            
            if editMode?.wrappedValue == .inactive {
                //編集不可の場合は、テキストフィールドを使用不可(.disabled)にしグレーアウトする
                Text(input)
                    .foregroundColor(.gray)
            }
            else {
                //編集可能であれば枠線を表示させてわかりやすくする
                TextField("input", text: $input)
                    .border(Color.black, width: 0.5)
            }
            EditButton()
            Spacer()
        }
    }
}