SwiftUI - トグルボタンの作成方法

1. Toggle()の使い方

はじめにToggle()の初期値を設定します。

@State private var flag = true

この@Stateというものは、ReactでいうところのuseState()のようなものだと思います。値の状態管理(読み書き)するときに使用します。使用するときはView {...}内で使用し、アクセス修飾子をprivateとして宣言。値を渡すときは、変数名と$プレフィックス演算子を使用する。

Toggle()を使用するときは下記のように記述します。どちらも表示される内容は同じです。

Toggle("label", isOn: $flag)
Toggle(isOn: $flag) {
    Text("label")
}

isOn: Bool - オン/オフ状態のスイッチ

2. Toggle()を使ってアイコンを切り替えてみる

ここでは、Toggle()を使用してボタンがクリックされたらアイコンが切り替わるというものを作成してみました。

alt

import SwiftUI

struct ContentView: View {
    @State private var lightBulb = false
    
    var body: some View {
        VStack {
            if lightBulb {
                Image(systemName: "lightbulb.fill")
                    .font(.system(size: 100))
                    .foregroundColor(.yellow)
            } else {
                Image(systemName: "lightbulb")
                    .font(.system(size: 100))
                    .foregroundColor(.gray)
            }
            Toggle("", isOn: $lightBulb)
            .fixedSize()
            .padding(25)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

State | Apple Developer Documentation
Access Control — The Swift Programming Language (Swift 5.4)
Swiftアクセス修飾子 - Qiita
Toggle() | Apple Developer Documentation
isOn | Apple Developer Documentation