用于从一组互斥值中进行选择的控件。

选择器样式根据其祖先进行更改，在 Form 或 List 下，它显示为单个列表行，您可以点击它以进入一个显示所有可能选项的新屏幕。

@State private var selection: Int = 2

NavigationView {
          Form {
              Section {
                Picker(selection: $selection, label: Text("Picker Name") , content: {
                  Text("Value 1").tag(0)
                  Text("Value 2").tag(1)
                  Text("Value 3").tag(2)
                  Text("Value 4").tag(3)
                })
//                .pickerStyle(.inline)
              }
          }
      }

截屏2023-06-14 22.17.56.png

不同风格 .pickerStyle(.inline), 打开注释是展开样式

截屏2023-06-14 22.22.05.png

截屏2023-06-14 22.25.52.png

DatePicker, 用于选择日期的控件。

日期选择器样式也会根据其祖先而改变。 在 Form 下或List，它显示为单个列表行，您可以点击以展开日期选择器（就像日历应用程序一样）。

@State var selectedDate = Date()

var dateClosedRange: ClosedRange<Date> {
    let min = Calendar.current.date(byAdding: .day, value: -1, to: Date())!
    let max = Calendar.current.date(byAdding: .day, value: 1, to: Date())!
    return min...max
}

NavigationView {
    Form {
        Section {
            DatePicker(
                selection: $selectedDate,
                in: dateClosedRange,
                displayedComponents: .date,
                label: { Text("Due Date") }
            )
        }
    }
}

截屏2023-06-14 22.28.43.png

在Form和List之外，它显示为普通的滑动选择器

@State var selectedDate = Date()

var dateClosedRange: ClosedRange<Date> {
    let min = Calendar.current.date(byAdding: .day, value: -1, to: Date())!
    let max = Calendar.current.date(byAdding: .day, value: 1, to: Date())!
    return min...max
}

DatePicker(
    selection: $selectedDate,
    in: dateClosedRange,
    displayedComponents: [.hourAndMinute, .date],
    label: { Text("Due Date") }
)

截屏2023-06-14 22.30.55.png

如果你的 DatePicker 的标签只是纯 Text 你可以使用这个更简单的声明进行初始化。

DatePicker("Due Date",
            selection: $selectedDate,
            in: dateClosedRange,
            displayedComponents: [.hourAndMinute, .date])

如上图

minimumDate 和 maximumDate 可以使用 ClosedRange, PartialRangeThrough,和 PartialRangeFrom.

DatePicker("Minimum Date",
    selection: $selectedDate,
    in: Date()...,
    displayedComponents: [.date])
DatePicker("Maximum Date",
    selection: $selectedDate,
    in: ...Date(),
    displayedComponents: [.date])

截屏2023-06-14 22.35.29.png