Toggle

概述

Toggle 是一个用于切换开关状态的控件。它允许用户在两个状态之间切换（开/关），通常用于设置界面或需要布尔值切换的场景。

1struct Toggle<Label> where Label : View

创建 Toggle

基本用法

使用 init(_:isOn:) 初始化方法创建 Toggle：

1@State private var isEnabled = false
2
3Toggle("启用功能", isOn: $isEnabled)

使用自定义标签

使用 init(isOn:label:) 初始化方法，可以自定义标签视图：

1Toggle(isOn: $isEnabled) {
2    HStack {
3        Image(systemName: "airplane")
4        Text("飞行模式")
5    }
6}

使用系统图标

使用 init(_:systemImage:isOn:) 初始化方法，可以添加系统图标：

1@State private var vibrateOnRing = true
2
3Toggle("振动", systemImage: "dot.radiowaves.left.and.right", isOn: $vibrateOnRing)

使用图片资源

使用 init(_:image:isOn:) 初始化方法，可以使用自定义图片：

1Toggle("设置", image: "gearshape", isOn: $isEnabled)

集合 Toggle (iOS 16+)

使用 init(_:sources:isOn:) 创建集合 Toggle，可以同时控制多个值：

 1struct EmailList: Identifiable {
 2    let id: String
 3    var isSubscribed: Bool
 4}
 5
 6@State private var lists = [
 7    EmailList(id: "月度更新", isSubscribed: true),
 8    EmailList(id: "新闻简报", isSubscribed: false)
 9]
10
11Form {
12    Section {
13        ForEach($lists) { $list in
14            Toggle(list.id, isOn: $list.isSubscribed)
15        }
16    }
17}

使用 AppIntent (iOS 17+)

使用 init(_:isOn:intent:) 创建支持 AppIntent 的 Toggle：

1import AppIntents
2
3Toggle("启用功能", isOn: $isEnabled, intent: MyToggleIntent())

ToggleStyle 样式

Switch 样式

默认样式，类似于 iOS 的开关：

1Toggle("飞行模式", isOn: $isEnabled)
2    .toggleStyle(.switch)

Button 样式 (iOS 15+)

按钮样式的 Toggle，活动时高亮显示：

1@State private var showVideos = true
2@State private var showAudio = false
3
4HStack {
5    Toggle("视频", isOn: $showVideos)
6    Toggle("音频", isOn: $showAudio)
7}
8.toggleStyle(.button)
9.tint(.indigo)

Note

Button 样式常用于筛选栏、标签选择器等场景。

自动样式

使用 .automatic 会根据平台和上下文自动选择合适的样式：

1Toggle("设置", isOn: $isEnabled)
2    .toggleStyle(.automatic)

修饰符

tint

修改 Toggle 的强调色：

1Toggle("启用功能", isOn: $isEnabled)
2    .tint(.orange)

labelsHidden

隐藏 Toggle 的标签：

1Toggle("", isOn: $isEnabled)
2    .labelsHidden()
3    .accessibilityLabel("启用功能")

自定义样式

可以通过实现 ToggleStyle 协议来创建自定义样式：

 1struct CustomToggleStyle: ToggleStyle {
 2    func makeBody(configuration: Configuration) -> some View {
 3        HStack {
 4            configuration.label
 5            Spacer()
 6            RoundedRectangle(cornerRadius: 30)
 7                .fill(configuration.isOn ? Color.green : Color.gray)
 8                .frame(width: 50, height: 32)
 9                .overlay(
10                    Circle()
11                        .fill(Color.white)
12                        .padding(3)
13                        .offset(x: configuration.isOn ? 10 : -10)
14                )
15                .onTapGesture {
16                    withAnimation(.spring()) {
17                        configuration.isOn.toggle()
18                    }
19                }
20        }
21    }
22}
23
24// 使用
25Toggle("自定义", isOn: $isEnabled)
26    .toggleStyle(CustomToggleStyle())

完整示例

 1import SwiftUI
 2
 3struct ToggleDemo: View {
 4    @State private var isEnabled = false
 5    @State private var notifications = true
 6    @State private var sound = true
 7    
 8    var body: some View {
 9        Form {
10            Section("基础用法") {
11                Toggle("启用功能", isOn: $isEnabled)
12                Text(isEnabled ? "功能已启用" : "功能已禁用")
13                    .foregroundColor(isEnabled ? .green : .secondary)
14            }
15            
16            Section("自定义标签") {
17                Toggle(isOn: $notifications) {
18                    HStack {
19                        Image(systemName: "bell.fill")
20                        Text("推送通知")
21                    }
22                }
23            }
24            
25            Section("Switch 样式") {
26                Toggle("声音", isOn: $sound)
27                    .toggleStyle(.switch)
28            }
29            
30            Section("Button 样式") {
31                HStack {
32                    Toggle("视频", isOn: $notifications)
33                    Toggle("音频", isOn: $sound)
34                }
35                .toggleStyle(.button)
36                .tint(.indigo)
37            }
38            
39            Section("自定义颜色") {
40                Toggle("自定义颜色", isOn: $isEnabled)
41                    .tint(.orange)
42            }
43            
44            Section("隐藏标签") {
45                Toggle("", isOn: $isEnabled)
46                    .labelsHidden()
47                    .accessibilityLabel("启用功能")
48            }
49            
50            Section("绑定到派生状态") {
51                Toggle("用户偏好", isOn: Binding(
52                    get: { UserDefaults.standard.bool(forKey: "user_preference") },
53                    set: { UserDefaults.standard.set($0, forKey: "user_preference") }
54                ))
55            }
56        }
57    }
58}

平台支持

№	平台	最低版本
0	iOS	13.0+
1	iPadOS	13.0+
2	macOS	10.15+
3	tvOS	13.0+
4	watchOS	6.0+
5	visionOS	1.0+