[SwiftUI] Checkbox の使用方法

SwiftUI のライブラリ一覧には Checkbox は用意されていません。ただし、前回紹介した Toggle を使用して CheckBox を作成することができますので、今回は Checkbox の作成とその使用方法について説明をします。

Checkbox の例

環境

OS: macOS Big Sur 11.2.1
Xcode: 12.4
Swift: 5.2.4

Checkbox の作成方法

前回の記事で紹介した toggleStyle モディファイアに CheckboxToggleStyle 構造体を渡すことで CheckBox を作成することができます。
はじめに ToggleStyle を継承した構造体を継承して、Checkbox のスタイルを実装します。
以下にコード例を示します。

struct MyCheckboxToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        return HStack {
            configuration.label
            Spacer()
            Image(systemName: configuration.isOn ? "checkmark.square" : "square")
                .resizable()
                .frame(width: 20, height: 20)
                .padding()
                .onTapGesture { configuration.isOn.toggle() }
        }
    }
}

作成した構造体 MyCheckBoxStyle には makeBody というメソッドが１つあります。このメソッドは外観を形作るもので、戻り値の型は some View です。
メソッド本体は、HStack の中に、label とCheckbox のイメージを表示するための Image を実装しています。6行目の Image では、チェック状態になったとき（つまり、configuration.isOn が true のとき）に「checkmark.square（チェック入りのボックス）」を表示し、チェックされていない状態（configuration.isOn が false）のときに「square（ただのボックス）」を表示するようにしてチェックボックスを実現しています。
10行目の onTapGesture モディファイアは、タップされたときに isOn 変数の値（true/false）を反転させています。

CheckBox の使用方法

先程作成した MyCheckBoxStyle 構造体を使用して Checkbox を使用するコードを以下に示します。
冒頭でも述べた通り、Checkbox を作成するには Toggle を使用する必要があります。
5,6行目でToggle を作成しているのですが、toggleStyle モディファイアに先程作成した作成した MyCheckBoxToggleStyle を指定すると Checkbox を利用することができます。
Checkbox のチェック状態は、変数 status で行っています。

struct ContentView: View {
    @State private var status = true

    var body: some View {
        Toggle("CheckBox",isOn: $status)
            .toggleStyle(MyCheckboxToggleStyle())
    }
}

struct MyCheckboxToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        return HStack {
            configuration.label
            Spacer()
            Image(systemName: configuration.isOn ? "checkmark.square" : "square")
                .resizable()
                .frame(width: 20, height: 20)
                .padding()
                .onTapGesture { configuration.isOn.toggle() }
        }
    }
}

Checkbox の例