【SwiftUI】ビューコントローラー：Toggle

環境

Xcode：16.1
Swift：6
iOS：16

基本

概要

Toggleとは
※iOS 13から
ON/OFF状態を切り替えるビュー

パラメータ

label：トグルのラベル
isOn：on,offの状態を保持するbool型の状態変数を指定

Toggle("ラベル", isOn : $flag)

Toggle(isOn: $flag) {
    // ラベルとなるViewを記述
    Text("ラベル")
}

例

import SwiftUI

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

    var body: some View {

        // ラベルと値を保存する変数を指定する
        Toggle("ラベル", isOn : $flag)
            .padding()

        // カスタマイズする場合の書き方
        Toggle(isOn: $flag) {
            Text(flag ? "ON" : "OFF")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

トグルの色を変更（tint）

Toggle(flag ? "ON" : "OFF", isOn : $flag)
    .tint(.blue)

トグルのスタイル（toggleStyle）

スイッチ

※デフォルト

Toggle(flag ? "ON" : "OFF", isOn : $flag)
    .toggleStyle(.switch)

ボタン

Toggle(flag ? "ON" : "OFF", isOn : $flag)
    .toggleStyle(.switch)

カスタムスタイル

configuration.label：ラベル
configuration.isOn：トグルの状態

import SwiftUI

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

    var body: some View {
        Form {
            Section("Form"){

                // ラベルと値を保存する変数を指定する
                Toggle(flag ? "ON" : "OFF", isOn : $flag)
                    .toggleStyle(CustomToggleStyle())
            }
        }
    }
}

// カスタムしたトグル
struct CustomToggleStyle: ToggleStyle {

    func makeBody(configuration: Configuration) -> some View {

        HStack {
            // ラベル
            configuration.label
            Spacer()
            // 画像を表示
            Image(systemName: configuration.isOn ? "checkmark.circle.fill" : "circle")
                .onTapGesture {
                    configuration.isOn.toggle() // タップされたら状態を変更
                }
        }
    }

}
#Preview {
    ContentView()
}