Toggle・Slider・Stepper ― いろいろな入力部品

導入

文字入力だけでなく、オン/オフのスイッチ、スライダー、増減ボタン。設定画面でおなじみの部品も、すべて @State とのバインディングで動きます。

説明

Toggle（スイッチ）は isOn: に、Slider（スライダー）と Stepper（増減）は value: に $ でバインドします。

struct ContentView: View {
    @State private var isOn = true
    @State private var volume = 50.0
    @State private var quantity = 1

    var body: some View {
        VStack(alignment: .leading, spacing: 24) {
            Toggle("通知を受け取る", isOn: $isOn)

            Text("音量: \(volume)")
            Slider(value: $volume, in: 0...100)

            Stepper("個数: \(quantity)", value: $quantity)
        }
        .padding()
    }
}

• Toggle("...", isOn: $isOn) … オン/オフ。isOn が true/false で変わる。
• Slider(value: $volume, in: 0...100) … 0〜100の範囲をなめらかに選ぶ。
• Stepper("...", value: $quantity) … ＋/－で1ずつ増減。

どれも共通して「部品を操作 → @Stateが変わる → 表示が追従」という同じしくみです。部品が変わっても考え方は1つ、というのがSwiftUIの学びやすさです。

やってみよう

プレビューのスイッチ・スライダー・ステッパーを操作して、上の表示（音量・個数）が変わるのを確かめましょう。Stepper の初期値 quantity を変えてみるのもよいでしょう。

演習

Toggle の状態 isOn に応じて、if isOn { ... } else { ... } で「オン」「オフ」の文字を出す Text を足してください。