SwiftUI基础学习日记（五）DatePicker

移动端开发_小黑
1,354 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

不怕路远,就怕志短;不怕缓慢,就怕常站;不怕贫穷,就怕惰懒;不怕对手悍,就怕自己颤。

大家好，我是小黑，一个还没秃头的程序员~~~

今天依然继续swiftUI基础控件中的各种选择器，话不多说，正文开始：

DatePicker

DatePicker是用于选择绝对日期的控件。

如果希望提供允许用户选择日历日期和时间(可选)的视图，则使用DatePicker。视图绑定到一个Date实例。 下面的例子创建了一个基本的DatePicker，它在iOS上显示为代表日期的文本。本例将显示日历日期和时间。当用户轻击或单击文本时，一个日历视图就会出现，用户可以从中选择一个日期。点击时间可进行滚动或者输入，当用户拒绝日历视图时，视图将更新绑定的Date。

DatePicker("DatePicker", 
selection: $date,
displayedComponents: [.date,.hourAndMinute])

您可以将DatePicker限制在特定的日期范围内，只允许在某个日期之前或之后或两个日期之间进行选择。下面的示例显示了一个日期和时间选择器，它只允许2021年(在UTC时区)内进行选择

@State private var date = Date()
let dateRange: ClosedRange<Date> = {
    let calendar = Calendar.current
    let startComponents = DateComponents(year: 2021, month: 1, day: 1)
    let endComponents = DateComponents(year: 2021, month: 12, day: 31, hour: 23, minute: 59, second: 59)
    return calendar.date(from:startComponents)!
        ...
        calendar.date(from:endComponents)!
}()

var body: some View {
    DatePicker(
        "Start Date",
         selection: $date,
         in: dateRange,
         displayedComponents: [.date, .hourAndMinute]
    )
}

要使用不同风格的日期选择器，请使用datePickerStyle(_:)视图修饰符。下面的示例显示了图形化的日期选择器样式。

@State private var date = Date()

var body: some View {
    DatePicker(
        "Start Date",
        selection: $date,
        displayedComponents: [.date]
    )
    .datePickerStyle(GraphicalDatePickerStyle())
}
样式说明
DefaultDatePickerStyle默认样式
WheelDatePickerStyle每一列可滚动的样式
FieldDatePickerStyle日期组件变成可编辑
GraphicalDatePickerStyle日历或时钟的样式
StepperFieldDatePickerStyle相邻的步进可以增加/减少所选组件
DatePickerStyle指定视图层次结构中所有日期选择器的外观和交互的类型

今天的swiftUI学习分享就到这里，刚开始接触学的慢，但是希望可以吸收进去，为了以后的实战做准备，后面我会持续输出iOS开发笔记，感谢大家的阅读！

avatar
文章
阅读
粉丝