SwiftUI Academy · レッスン

Toggle によるオン／オフ

Toggle をブール値の設定にバインドします。

「Toggle によるオン／オフ」はCoddyKit上の無料SwiftUI Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Meet the Toggle

A Toggle is SwiftUI's on/off switch. It is perfect for settings like notifications, dark mode, or any yes-or-no choice. 🔘

Toggle Needs a Boolean

Every Toggle reflects a Bool value. When the switch is on the value is true; when it is off the value is false. They stay in sync.

Store It in @State

Hold the on/off value in a @State property so the view can read and update it as the user flips the switch.

@State private var isOn = false

Bind with the Dollar Sign

Connect the Toggle to your state using the dollar sign. That creates a two-way binding so flips update the value automatically.

Toggle("Notifications", isOn: $isOn)

Give It a Clear Label

The first argument is the label users read next to the switch. Keep it short and describe exactly what the toggle controls.

Toggle("Dark Mode", isOn: $isDark)

React to the Value

Read the boolean anywhere in your body to react to the switch. Here the text changes based on whether the toggle is on.

Text(isOn ? "On" : "Off")

Put It in a Form

Toggles look most at home inside a Form, where they automatically gain the familiar iOS settings-row styling.

Form {
    Toggle("Wi-Fi", isOn: $wifiOn)
}

A Richer Label View

Need an icon too? Use the closure form so the label can be any view, like a Label with an SF Symbol.

Toggle(isOn: $isOn) {
    Label("Sound", systemImage: "speaker")
}

Style the Switch

Change the look with toggleStyle. The button style turns it into a tappable button instead of the default switch.

Toggle("Star", isOn: $isOn)
    .toggleStyle(.button)

Tint the Track

Set the on-color of the switch with the tint modifier, so it matches your app's accent and feels branded.

Toggle("On", isOn: $isOn)
    .tint(.green)

The Full View

Here it all comes together: one boolean, one Toggle bound to it, and a Text that responds to every flip.

struct SettingsView: View {
    @State private var isOn = false
    var body: some View {
        Toggle("Alerts", isOn: $isOn)
        Text(isOn ? "On" : "Off")
    }
}

Quick Check

How do you connect a Toggle to a boolean state value?

Recap

A Toggle binds to a Bool with the dollar sign, flips it on tap, and lets you react, style, and tint the switch. 🔁

よくある質問

「Toggle によるオン／オフ」レッスンは無料ですか？

はい。「Toggle によるオン／オフ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。

「Toggle によるオン／オフ」で何を学びますか？

Toggle をブール値の設定にバインドします。ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

SwiftUI Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Toggle によるオン／オフ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwiftUI Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← SwiftUI Academyに戻る