DatePicker

以下是 SwiftUI 中 DatePicker 组件的详细介绍，涵盖核心功能、样式、定制选项及常见用法：

一、`DatePicker` 基础 #

DatePicker 是 SwiftUI 中用于选择日期和时间的交互式组件，支持绑定到 Date 类型变量，自动处理用户输入更新。

基本用法 #

struct ContentView: View {
    @State private var selectedDate = Date()
    
    var body: some View {
        DatePicker("选择日期", selection: $selectedDate)
            .padding()
    }
}

参数说明：
- "选择日期"：标签文本（可选）。
- selection: $selectedDate：绑定到日期的 @State 或 @Binding 变量。

二、`DatePicker` 的样式 #

通过 .datePickerStyle() 修饰符指定外观样式，支持以下类型：

1. 默认样式（根据平台自动选择） #

iOS：轮式选择器（.wheel）。
macOS：下拉式选择器。

2. 轮式选择器（`.wheel`） #

DatePicker("选择日期", selection: $selectedDate)
    .datePickerStyle(.wheel)

3. 图形化选择器（`.graphical`） #

显示日历视图，支持直接点击日期。

DatePicker("选择日期", selection: $selectedDate)
    .datePickerStyle(.graphical)

4. 紧凑式选择器（`.compact`） #

显示简洁的日期标签，点击后弹出选择界面。

DatePicker("选择日期", selection: $selectedDate)
    .datePickerStyle(.compact)

5. 字段式选择器（`.field`，仅 macOS） #

允许直接在文本字段中输入日期。

三、限制日期范围 #

通过 in: 参数约束可选日期的范围：

let minDate = Calendar.current.date(byAdding: .year, value: -1, to: Date())!
let maxDate = Calendar.current.date(byAdding: .year, value: 1, to: Date())!

DatePicker(
    "选择日期",
    selection: $selectedDate,
    in: minDate...maxDate
)

四、时间选择模式 #

通过 displayedComponents 控制显示的日期/时间部分：

// 仅选择日期（默认）
DatePicker("选择日期", selection: $selectedDate, displayedComponents: .date)

// 仅选择时间
DatePicker("选择时间", selection: $selectedDate, displayedComponents: .hourAndMinute)

// 同时选择日期和时间（默认）
DatePicker("选择日期和时间", selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])

五、本地化与格式 #

1. 区域设置（通过 `Locale`） #

日期格式和星期显示会根据设备的区域设置自动调整：

// 强制使用中文区域
DatePicker("选择日期", selection: $selectedDate)
    .environment(\.locale, Locale(identifier: "zh_CN"))

2. 自定义标签格式 #

使用 .labelsHidden() 隐藏标签：

DatePicker("", selection: $selectedDate)
    .labelsHidden()

六、事件处理 #

通过 onChange 监听日期变化：

DatePicker("选择日期", selection: $selectedDate)
    .onChange(of: selectedDate) { newDate in
        print("新日期: \(newDate)")
    }

七、高级定制 #

1. 自定义背景与边框 #

DatePicker("选择日期", selection: $selectedDate)
    .padding()
    .background(RoundedRectangle(cornerRadius: 10).fill(Color.gray.opacity(0.1))

2. 结合 `Form` 使用 #

在表单中自动适配样式：

Form {
    DatePicker("日期", selection: $selectedDate)
    DatePicker("时间", selection: $selectedDate, displayedComponents: .hourAndMinute)
}

八、平台差异 #

特性	iOS	macOS
默认样式	轮式（`.wheel`）	下拉式
图形化样式支持	✅	✅
紧凑式样式支持	✅	❌
时间选择精度	分钟级	秒级

九、总结 #

核心功能：绑定日期、样式选择、范围限制、时间/日期模式。
适用场景：用户注册（生日选择）、日程安排、倒计时等。
扩展性：通过 SwiftUI 修饰符可轻松定制外观，与其他组件（如 Form）无缝集成。

官方文档：DatePicker | Apple Developer Documentation

一、DatePicker 基础 #