Picker 和 Toggle 控件

在 SwiftUI 中，Picker 和 Toggle 是用于用户交互的重要控件。它们分别用于选择项和开关状态，下面将详细介绍这两个控件的使用方法。

1. Picker

1.1 创建 Picker

Picker 允许用户从一组选项中进行选择，通常用于选择类别、颜色或其他选项。

示例：简单 Picker

import SwiftUI

struct PickerExample: View {
    @State private var selectedColor: String = "Red"
    let colors = ["Red", "Green", "Blue"]

    var body: some View {
        VStack {
            Text("Selected Color: \(selectedColor)") // 显示选中的颜色
                .font(.largeTitle)
            Picker("Select a Color", selection: $selectedColor) {
                ForEach(colors, id: \.self) { color in
                    Text(color) // Picker 选项
                }
            }
            .pickerStyle(MenuPickerStyle()) // 设置 Picker 样式
            .padding()
        }
    }
}

1.2 Picker 的样式

SwiftUI 提供多种样式来呈现 Picker，如 MenuPickerStyle、SegmentedPickerStyle 和 WheelPickerStyle。

示例：分段选择器

Picker("Select a Size", selection: $selectedSize) {
    Text("Small").tag("S")
    Text("Medium").tag("M")
    Text("Large").tag("L")
}
.pickerStyle(SegmentedPickerStyle()) // 使用分段样式

2. Toggle

2.1 创建 Toggle

Toggle 是一种开关控件，用于切换布尔状态。它可以用于表示启用/禁用选项，如通知或设置。

示例：简单 Toggle

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

    var body: some View {
        VStack {
            Toggle("Enable Notifications", isOn: $isOn) // 切换开关
                .padding()
            Text(isOn ? "Notifications are ON" : "Notifications are OFF") // 显示状态
                .font(.title)
        }
    }
}

2.2 使用 Toggle 的样式

你可以使用 .toggleStyle() 自定义 Toggle 的样式，例如 SwitchToggleStyle 和 ButtonToggleStyle。

示例：自定义开关样式

Toggle("Enable Dark Mode", isOn: $isDarkMode)
    .toggleStyle(SwitchToggleStyle()) // 使用开关样式

3. 在表单中使用 Picker 和 Toggle

这两个控件通常可以一起使用，以便用户进行更复杂的选择和设置。

示例：设置表单

struct SettingsForm: View {
    @State private var selectedLanguage: String = "English"
    @State private var isNotificationsEnabled: Bool = false

    var body: some View {
        Form {
            Section(header: Text("Preferences")) {
                Picker("Language", selection: $selectedLanguage) {
                    Text("English").tag("English")
                    Text("Spanish").tag("Spanish")
                    Text("French").tag("French")
                }
                .pickerStyle(SegmentedPickerStyle()) // 分段选择器

                Toggle("Enable Notifications", isOn: $isNotificationsEnabled) // 开关
            }
        }
    }
}

4. 总结

  • Picker：用于从一组选项中进行选择，适合收集单一项的输入。
  • Toggle：用于切换布尔状态，适合启用/禁用设置。

通过合理使用这两个控件，可以提升用户界面的交互性和可用性。

Last Updated::