SwiftUI基础组件之Picker详解

引言

在 iOS 应用开发中，经常需要让用户从一组选项中进行选择，SwiftUI 的 Picker 组件就可以很好地满足这一需求。Picker 提供了多种样式，能以不同的视觉形式呈现选项供用户选择，并且支持数据绑定，方便开发者处理用户的选择结果。下面我们将全面系统地介绍 Picker 组件及其常用属性，并通过代码示例来加深理解。

一、Picker 组件基本概念

Picker 是 SwiftUI 中的一个视图组件，它允许用户从预定义的一组选项中选择一个值。通常与 @State 属性包装器结合使用，用于存储和更新用户的选择。Picker 可以有多种样式，如内联样式、菜单样式、轮盘样式等，以适应不同的界面设计和使用场景。

二、基本创建

2.1 内联样式 Picker

import SwiftUI

struct ContentView: View {
    @State private var selectedColor = "红色"
    let colors = ["红色", "蓝色", "绿色"]

    var body: some View {
        VStack {
            Picker("选择颜色", selection: $selectedColor) {
                ForEach(colors, id: \.self) { color in
                    Text(color).tag(color)
                }
            }
           .pickerStyle(.inline)
            Text("你选择的颜色是: \(selectedColor)")
        }
    }
}

在这个示例中：

• @State private var selectedColor = "红色"：定义一个 @State 变量 selectedColor 用于存储用户选择的颜色，初始值为“红色”。
• let colors = ["红色", "蓝色", "绿色"]：定义一个包含颜色选项的数组。
• Picker("选择颜色", selection: $selectedColor)：创建一个 Picker，标题为“选择颜色”，并将其与 selectedColor 绑定。
• ForEach(colors, id: \.self) { color in Text(color).tag(color) }：使用 ForEach 遍历颜色数组，为每个颜色创建一个 Text 视图，并使用 tag 方法将其与颜色值关联起来。
• .pickerStyle(.inline)：将 Picker 设置为内联样式，这种样式会将选项直接显示在界面上。
  

2.2 菜单样式 Picker

import SwiftUI

struct ContentView: View {
    @State private var selectedFruit = "苹果"
    let fruits = ["苹果", "香蕉", "橙子"]

    var body: some View {
        VStack {
            Picker("选择水果", selection: $selectedFruit) {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit).tag(fruit)
                }
            }
           .pickerStyle(.menu)
            Text("你选择的水果是: \(selectedFruit)")
        }
    }
}

这里使用 .pickerStyle(.menu) 将 Picker 设置为菜单样式，用户点击时会弹出一个菜单显示选项。

2.3 轮盘样式 Picker

import SwiftUI

struct ContentView: View {
    @State private var selectedNumber = 1
    let numbers = Array(1...10)

    var body: some View {
        VStack {
            Picker("选择数字", selection: $selectedNumber) {
                ForEach(numbers, id: \.self) { number in
                    Text("\(number)").tag(number)
                }
            }
           .pickerStyle(.wheel)
            Text("你选择的数字是: \(selectedNumber)")
        }
    }
}

使用 .pickerStyle(.wheel) 将 Picker 设置为轮盘样式，类似于 iOS 系统中的日期选择器，用户可以通过滚动来选择选项。

三、常用属性及代码示例

3.1 selection

selection 属性用于绑定一个状态变量，该变量会存储用户的选择。当用户选择不同的选项时，绑定的变量值会相应更新。

import SwiftUI

struct ContentView: View {
    @State private var selectedDay = "星期一"
    let days = ["星期一", "星期二", "星期三", "星期四", "星期五"]

    var body: some View {
        VStack {
            Picker("选择日期", selection: $selectedDay) {
                ForEach(days, id: \.self) { day in
                    Text(day).tag(day)
                }
            }
            Text("你选择的日期是: \(selectedDay)")
        }
    }
}

3.2 tag

tag 方法用于为每个选项指定一个唯一的标识符，这个标识符会与 selection 绑定的变量进行匹配。当用户选择某个选项时，对应的 tag 值会被赋值给 selection 变量。

import SwiftUI

struct ContentView: View {
    @State private var selectedShape = "圆形"
    let shapes = ["圆形", "方形", "三角形"]

    var body: some View {
        VStack {
            Picker("选择形状", selection: $selectedShape) {
                ForEach(shapes, id: \.self) { shape in
                    Text(shape).tag(shape)
                }
            }
            Text("你选择的形状是: \(selectedShape)")
        }
    }
}

3.3 pickerStyle

pickerStyle 用于设置 Picker 的显示样式，除了前面提到的 .inline、.menu 和 .wheel 样式外，还有其他样式可供选择，如 .segmented 样式。

import SwiftUI

struct ContentView: View {
    @State private var selectedOption = "选项 1"
    let options = ["选项 1", "选项 2", "选项 3"]

    var body: some View {
        VStack {
            Picker("选择选项", selection: $selectedOption) {
                ForEach(options, id: \.self) { option in
                    Text(option).tag(option)
                }
            }
           .pickerStyle(.segmented)
            Text("你选择的选项是: \(selectedOption)")
        }
    }
}

.segmented 样式会将选项显示为分段控件，用户可以通过点击不同的分段来选择选项。

四、综合案例

模拟一个旅行计划的设置界面。用户可以选择旅行目的地、出行方式和旅行时长。这个例子展示了如何使用Picker的不同样式、绑定数据和设置界面布局。

import SwiftUI

struct TravelPlanView: View {
    // 定义存储用户选择的状态变量
    @State private var selectedDestination = "巴黎"
    @State private var selectedTransportation = "飞机"
    @State private var selectedDuration = 7
    
    // 定义选项数组
    let destinations = ["巴黎", "东京", "纽约", "悉尼"]
    let transportations = ["飞机", "火车", "汽车"]
    let durations = Array(1...30) // 1到30天的选项

    var body: some View {
        NavigationStack {
            VStack(spacing: 20) {
                // 目的地选择
                VStack(alignment: .leading) {
                    Text("选择目的地")
                        .font(.headline)
                    Picker("选择目的地", selection: $selectedDestination) {
                        ForEach(destinations, id: \.self) { destination in
                            Text(destination)
                        }
                    }
                    .pickerStyle(MenuPickerStyle()) // 使用菜单样式
                }
                
                // 出行方式选择
                VStack(alignment: .leading) {
                    Text("选择出行方式")
                        .font(.headline)
                    Picker("选择出行方式", selection: $selectedTransportation) {
                        ForEach(transportations, id: \.self) { transportation in
                            Text(transportation)
                        }
                    }
                    .pickerStyle(SegmentedPickerStyle()) // 使用分段控制样式
                }
                
                // 旅行时长选择
                VStack(alignment: .leading) {
                    Text("选择旅行时长（天）")
                        .font(.headline)
                    Picker("选择旅行时长", selection: $selectedDuration) {
                        ForEach(durations, id: \.self) { duration in
                            Text("\(duration) 天")
                        }
                    }
                    .pickerStyle(WheelPickerStyle()) // 使用滚轮样式
                }
                
                // 显示选择的旅行计划
                VStack(alignment: .leading) {
                    Text("旅行计划总结")
                        .font(.headline)
                    Text("目的地: \(selectedDestination)")
                    Text("出行方式: \(selectedTransportation)")
                    Text("旅行时长: \(selectedDuration) 天")
                }
                .padding(.top, 20)
                
                Spacer()
            }
            .padding()
            .navigationTitle("旅行计划")
        }
    }
}

代码说明：

• NavigationStack:
  • 使用NavigationStack来管理视图的导航结构。
• 布局:
  • 使用VStack进行垂直布局，并通过spacing来调整子视图之间的间距。
  • 每个选择器和其对应的标签放在一个VStack中，以便更好地组织和显示。
• Picker样式:
  • MenuPickerStyle()用于目的地选择，适合下拉菜单。
  • SegmentedPickerStyle()用于出行方式选择，适合少量选项。
  • WheelPickerStyle()用于旅行时长选择，适合较多选项。
• 状态绑定:
  • 使用@State属性包装器来管理用户的选择，并确保选择的变化能够实时反映在界面上。
• 总结显示:
  • 使用Text组件来动态显示用户选择的旅行计划。