【SwiftUI】Toggleを用いてチェックボックスを作る

SwiftUIでチェックボックスを実装する方法の1つとして、ToggleStyleのカスタムクラスを追加する方法があります。

ToggleStyleとは、Toggleの外観と動作を定義するモディファイアです

カスタムクラスを実装する

struct CheckboxStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        // チェックボックスの外観と動作を返す
        return HStack {
            Image(systemName: configuration.isOn ? "checkmark.circle.fill" :
                    "circle")
                .foregroundColor(configuration.isOn ? .blue : .black)
                .font(.system(size: 28, weight: .semibold, design: .rounded))
            configuration.label
        }
        .onTapGesture {
            configuration.isOn.toggle()
        }
    }
}

configurationからisOnやlabelが取得できるので、Toggleがオンとオフの時の外観をmakeBody(configuration:)に書いています。
onTapGestureを追加してタップされた時にisOnを更新します。

カスタムスタイルを指定する

@State private var isChecked: Bool = false

var body: some View {
        Toggle(isOn: $isChecked) {
            Text("チェックボックス")
                .font(.system(.title2, design: .rounded))
                .fontWeight(.heavy)
                .foregroundColor(isChecked ? .blue : .black)
                .padding(.vertical, 12)
        }
        .toggleStyle(CheckboxStyle())
    }

.toggleStyleに作成したカスタムクラスを指定します。

実行結果

isOn = false

isOn = true

makeBody(configuration:)の返すViewを変更することで色々な見た目のチェックボックスを実装することができます。