【SwiftUI】SwiftUIらしくCheckBoxを使う（ToggleStyle）

SwiftUIにはCheckBoxそのものは用意されていません。
CheckBoxを作ること自体は簡単なので色々な方法で実装している人がいます。

今回はその中でもSwiftUIらしい実装方法を紹介します。

コード

struct ToggleCheckBoxView: View {
    @State var toggle = false

    var body: some View {
        Toggle("Toggle", isOn: $toggle)
            .toggleStyle(CheckBoxToggleStyle())
    }
}

struct CheckBoxToggleStyle:ToggleStyle{
    func makeBody(configuration: Configuration) -> some View {
        Button{
            configuration.isOn.toggle()
        } label: {
            HStack{
                configuration.label
                Spacer()
                Image(systemName: configuration.isOn
                      ? "checkmark.circle.fill"
                      : "circle")
            }
        }
    }
}

解説

ToggleはToggleStyleによって見た目の変更が可能ですが、
Protocolとして実装しModifierに渡す事で任意に定義出来ます。

makeBodyはreturnがsome Viewなので通常のViewのbodyの様に書く事が出来ます。
ここに切り替えアクションの為のボタンを置き、真偽で画像が切り替わる様にlabelを設定します。

configurationからはisOnでbool値が扱えるのでButtonで切り替えます。
configuration.labelにはToggleに設定したlabelが取得出来るので、チェックマークと並べる様にします。

これでtoggleStyle Modifierとして使用出来るので非常にSwiftUIらしい使い方が出来ます。

余談

Modifierとして使用出来ることは利点ですが、
中身の記述はそのままViewとして使いチェックボックスに出来るから、
検索してもこの方法は上位に出てきません。

しかしToggleStyleのmakeBodyのドキュメントにはチェックボックスが例として挙げらており、
この方法を推奨しているのではないかと思います。是非覚えて行って下さい。

ブログ紹介

ブログ記事には画像付きの解説や.toggleStyle(.button)の様に使う方法、
Toggleを使わないパターンの紹介もあります。
興味があれば見てみて下さい。