SwiftUI Academy · 课时

使用 Toggle 切换开关

将 Toggle 绑定到布尔设置。

使用 Toggle 切换开关 是 CoddyKit 上的免费 SwiftUI Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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 切换开关」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 SwiftUI Academy 课程的其余内容，请升级到 CoddyKit PRO。 SwiftUI Academy 课程共包含 4 节课。

「使用 Toggle 切换开关」这节课中我会学到什么？

将 Toggle 绑定到布尔设置。你通过在浏览器中直接运行的动手代码来练习 SwiftUI Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 SwiftUI Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 SwiftUI Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「使用 Toggle 切换开关」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 SwiftUI Academy 课中编写并运行代码吗？

能。每节 SwiftUI Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 SwiftUI Academy