用于从一组互斥值中进行选择的控件。
选择器样式根据其祖先进行更改,在 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.pngDatePicker, 用于选择日期的控件。
日期选择器样式也会根据其祖先而改变。 在 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
网友评论