SwiftUI基础组件之Toggle详解

一、简介

Toggle（开关）组件是一种常见且实用的交互元素，它允许用户在两种状态（开启和关闭）之间进行切换。在 SwiftUI 中，Toggle 组件提供了简单易用的方式来实现这种交互，同时具备丰富的属性可以进行样式和功能定制。

二、基本使用

下面是创建一个简单 Toggle 的代码示例：

import SwiftUI

struct ContentView: View {
    @State private var isOn = false

    var body: some View {
        Toggle("开启通知", isOn: $isOn)
           .padding()
    }
}

在这个示例中：

• @State private var isOn = false：定义了一个 @State 变量 isOn，用于存储 Toggle 的开关状态，初始值为 false（关闭状态）。
• Toggle("开启通知", isOn: $isOn)：创建了一个 Toggle 实例，第一个参数 “开启通知” 是 Toggle 的标签文本，用于描述这个开关的功能；第二个参数 $isOn 是对 isOn 变量的绑定，使用 $ 符号获取其绑定值，这样Toggle的状态变化会更新isOn变量，isOn 变量的变化也会更新Toggle的显示状态。

三、常用属性

3.1 isOn

isOn 是 Toggle 的最基本属性，绑定到一个布尔值，表示开关的当前状态。

import SwiftUI

struct ContentView: View {
    @State private var isOn: Bool = false

    var body: some View {
        Toggle("Enable Feature", isOn: $isOn)
            .padding()
    }
}

3.2 label

label 用于描述Toggle的用途，可以是简单的文本，也可以是复杂的视图。

// 简单文本
Toggle(isOn: $isOn, label: {
    Text("开启通知")
})
.padding()
// 复杂视图
Toggle(isOn: $isOn, label: {
    HStack{
        Image(systemName: isOn ? "sun.max.fill" : "moon.fill")
        Text("深色模式")
    }
})
.padding()

默认效果：

开启后效果：

3.3 toggleStyle

toggleStyle 用于自定义 Toggle 的外观。SwiftUI 提供了一些内置样式，例如 SwitchToggleStyle 和 ButtonToggleStyle。

import SwiftUI

struct ContentView: View {
    @State private var isOn: Bool = false

    var body: some View {
        Toggle("Enable Feature", isOn: $isOn)
            .toggleStyle(SwitchToggleStyle(tint: .blue))
            .padding()
    }
}

3.4 onChange

onChange 用于监听 Toggle 状态的变化，执行特定操作。

Toggle("开启", isOn: $isOn)
      .onChange(of: isOn){oldValue,newValue in
          print("Toggle changed to \(newValue ? "On" : "Off")")
      }
      .padding()

3.5 accessibilityLabel

accessibilityLabel 用于为 Toggle 提供无障碍支持的描述.

import SwiftUI

struct ContentView: View {
    @State private var isOn: Bool = false

    var body: some View {
        Toggle("Enable Feature", isOn: $isOn)
            .accessibilityLabel("Enable or disable the feature")
            .padding()
    }
}

四、综合案例

使用 Toggle 控制应用的主题（浅色和深色），并包含一些自定义样式和无障碍支持。

import SwiftUI

struct ThemeToggleView: View {
    @State private var isDarkMode: Bool = false

    var body: some View {
        VStack {
            // Toggle with custom label and style
            Toggle(isOn: $isDarkMode) {
                HStack {
                    Image(systemName: isDarkMode ? "moon.fill" : "sun.max.fill")
                        .foregroundColor(isDarkMode ? .yellow : .orange)
                    Text(isDarkMode ? "Dark Mode" : "Light Mode")
                        .font(.headline)
                }
            }
            .toggleStyle(SwitchToggleStyle(tint: .purple)) // Custom toggle style
            .padding()
            .onChange(of: isDarkMode) { oldValue,newValue in
                // Perform an action when the toggle changes
                print("Theme changed to \(newValue ? "Dark" : "Light") Mode")
            }
            .accessibilityLabel("Toggle between Light and Dark mode") // Accessibility support

            // Example text to demonstrate theme change
            Text("Hello, SwiftUI!")
                .font(.largeTitle)
                .foregroundColor(isDarkMode ? .white : .black)
                .padding()
                .background(isDarkMode ? Color.black : Color.white)
                .cornerRadius(10)
                .shadow(radius: 5)
        }
        .padding()
        .background(isDarkMode ? Color.black.edgesIgnoringSafeArea(.all) : Color.white.edgesIgnoringSafeArea(.all))
        .animation(.easeInOut, value: isDarkMode)  // Smooth transition for theme change
    }
}

#Preview {
    ThemeToggleView()
}

效果：

开启深色模式：