SwiftUI：使用 DatePicker 选择日期和时间

SwiftUI为我们提供了一种称为DatePicker的专用选择器类型，可以将它绑定到日期属性。是的，Swift有一个专门用于处理日期的数据类型，不需要感到奇怪，它被称为——Date。

因此，要使用它，您首先需要使用@State属性，例如：

@State private var wakeUp = Date()

然后，您可以将其绑定到日期选择器，如下所示：

var body: some View {
    DatePicker("Please enter a date", selection: $wakeUp)
}

尝试在模拟器中运行该代码，以便查看其外观。您应该会看到带有日期和时间的滚轮，以及左侧的“请输入日期”标签。

现在，您可能会认为该标签看起来很丑，并尝试用以下标签替换它：

DatePicker("", selection: $wakeUp)

但是，如果这样做，您将遇到两个问题：

1. 即使日期选择器标签为空，日期选择器仍为其留出空间；
2. 启用了屏幕阅读器的用户（我们更熟悉为VoiceOver）现在也不知道日期选择器是为了什么选择什么日期。

有两种选择，都可以解决问题。

首先，我们可以将DatePicker包装在一个Form内：

var body: some View {
    Form {
        DatePicker("Please enter a date", selection: $wakeUp)
    }
}

就像常规的Picker一样，这会改变SwiftUI渲染视图的方式。不过，这次我们没有得到一个需要使用NavigationViewpush的视图；取而代之的是，我们得到一个列表行，当点击它时它会展开成日期选择器。

这看起来非常好，并且将表单的简洁性与日期选择器熟悉的基于滚轮的用户界面相结合。可令人伤心的是，现在这些选择器的显示方式有时会出现一些故障。我们稍后再讲。

除了使用表单之外，另一种方法是使用labelsHidden（）修饰符，如下所示：

var body: some View {
    DatePicker("Please enter a date", selection: $wakeUp)
        .labelsHidden()
}

该标签仍包含原始标签，因此屏幕阅读器可以将其用于VoiceOver，但现在它们在屏幕上不再可见，日期选择器将占据屏幕上的所有水平空间。

日期选择器为我们提供了几个配置选项，以控制它们的工作方式。首先，我们可以使用displayedComponents来决定用户应该看到的选项类型：

• 如果您不提供此参数，则用户会看到一天，一小时和一分钟。
• 如果您使用.date，则用户可以看到月，日和年。
• 如果使用.hourAndMinute，则用户只会看到小时和分钟部分。

因此，我们可以选择这样的精确时间：

DatePicker("Please enter a time", selection: $wakeUp, displayedComponents: .hourAndMinute)

最后，有一个in参数与Stepper的工作原理相同：我们可以为其提供日期范围，并且日期选择器将确保用户无法选择超出范围。

现在，我们已经使用一段时间了，您已经习惯看到1 ... 5或0 .. <10之类的东西，但是我们也可以将Swift日期与范围一起使用。例如：

//当你创建一个新的Date实例，它将获取当前的时间
let now = Date()

// 创建第二个Date实例，将其设置为从现在开始的秒数
let tomorrow = Date().addingTimeInterval(86400) 

// 从这两个创建范围
let range = now ... tomorrow

这对于DatePicker确实有用，但还有更好的地方：Swift允许我们形成一个单边范围——我们指定起始或结束但不同时指定两个范围的范围，让Swift推断另一个范围。

例如，我们可以这样创建一个日期选择器：

DatePicker("Please enter a date", selection: $wakeUp, in: Date()...)

这将允许将来的所有日期，但不允许过去的所有日期——读为“从当前日期到任何日期”。

译自 Selecting dates and times with DatePicker

Previous: BetterRest 项目——使用 Stepper 输入数字	Hacking with iOS: SwiftUI Edition	Next: BetterRest 项目——使用日期

赏我一个赞吧~~~