【SwiftUI】ToggleStyleを使用してCheckBoxを作成する

はじめに

SwiftUIにはチェックボックスがありません。
めっちゃ使う場面ありそうなのに。。。

ToggleStyleを使って自作してみます。

サンプルアプリ

実装

import SwiftUI

public struct CheckBoxStyle: ToggleStyle {
    public func makeBody(configuration: Configuration) -> some View {
        HStack {
            Button {
                configuration.isOn.toggle()
            } label: {
                Image(systemName: configuration.isOn ? "checkmark.square" : "square")
            }
            .foregroundStyle(configuration.isOn ? Color.accentColor : Color.primary)

            configuration.label
        }
    }
}

extension ToggleStyle where Self == CheckBoxStyle {
    public static var checkBox: CheckBoxStyle {
        .init()
    }
}

使い方

import SwiftUI

struct ContentView: View {
    @State private var isChecked = false
    var body: some View {
        Toggle(isOn: $isChecked) {
            Text("利用規約に同意しました")
        }
        .toggleStyle(.checkBox)
    }
}

おわり

今回はSFSymbolsを使ってチェックボックスを作ってますが、カスタムのViewを作ってオリジナリティを出すのも良さそうです