选择器

本课属于 Coddy Swift 学习旅程的“SwiftUI 入门”单元。第 27 课，共 50 课。

Picker 会从选项列表中选出一个值。每个选项都是带有 .tag 的视图，所选选项的标签会写入绑定的状态：

@State private var size = "Medium"

Picker("Size", selection: $size) {
    Text("Small").tag("Small")
    Text("Medium").tag("Medium")
    Text("Large").tag("Large")
}

标签的类型必须与状态相同，这里是 String。.pickerStyle(.segmented) 会将选项显示为一行分段按钮：

Picker("Size", selection: $size) {
    Text("S").tag("Small")
    Text("L").tag("Large")
}
.pickerStyle(.segmented)

挑战

简单

添加一个标题为 Milk、绑定到 milk 且标识符为 milk 的 Picker，并添加三个选项：Whole、Oat 和 Soy，每个选项都使用自己的名称作为标签。保留下方显示所选项的文本。

亲手试试

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

SwiftUI 入门中的所有课

1简介

什么是 SwiftUI 应用文件

4修饰符

内边距背景修饰符顺序框架与形状回顾：徽章制作器

7列表

遍历可识别的项目列表添加项目回顾：购物清单

10项目：Coddy 咖啡馆

2显示内容

文本视图文本中的数字字体颜色 SF Symbols 回顾：价格标签

5状态与按钮

按钮 @State 属性真或假状态条件视图回顾：计分器

8导航

NavigationStack NavigationLink 传递数据工作表与警告框回顾：植物指南

11最终挑战

小费计算器待办事项列表判断真假游戏

3堆栈与布局

VStack HStack 对齐与间距 Spacer 与 ZStack 回顾：天气卡片

6用户输入

文本框切换开关步进器和滑块选择器回顾：订单表单

9共享数据

@Binding 属性可观察对象环境对象回顾：步数计数器

自己练习： SwiftUI 在线编辑器