swiftui中的DatePicker

DatePicker这个组件允许用户选择日期和时间，并且可以根据需要进行配置，比如选择日期、时间、或者两者都选择。

struct DatePickerView: View {
    @State var selected: Date = Date()
    let startDate: Date = Calendar.current.date(from: DateComponents(year: 2018)) ?? Date()
    // Calendar.current来获取当前的日历实例，并通过date(from:)方法尝试从DateComponents创建一个日期
    let endDate: Date = Date()
    @State private var selectedDate = Date()
    
    var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        formatter.timeStyle = .short
        return formatter
    }
    
    var body: some View {
        VStack {
            DatePicker("选择日期", selection: $selectedDate, displayedComponents: .date)
            //displayedComponents: .date指定了选择器应该显示的日期组件
                .padding()
                .background(Color.red.opacity(0.5))
                .cornerRadius(8)
                .clipShape(RoundedRectangle(cornerRadius: 8))
            
            DatePicker("选择时间", selection: $selected, in: startDate...endDate, displayedComponents: .date)
                .accentColor(Color.red)
                .datePickerStyle(
                    GraphicalDatePickerStyle()
                    
                )
            
            Text(dateFormatter.string(from: selected))
        }
    }
}

struct TimPicekView: View {
    @State private var selectedHour = Calendar.current.component(.hour, from: Date())
    // selectedHour 被初始化为当前小时
    @State private var selectedMinute = Calendar.current.component(.minute, from: Date())
    
    var body: some View {
        VStack {
            HStack {
                Picker("小时", selection: $selectedHour) {
                    ForEach(0..<24, id: \.self) { hour in
                        Text("\(hour)").tag(hour)
                    }
                }
                .pickerStyle(WheelPickerStyle())
                .frame(width: 100)
                
                Text("时")
                    .font(.title)
                
                Picker("分钟", selection: $selectedMinute) {
                    ForEach(0..<60, id: \.self) { minute in
                        Text("\(minute)").tag(minute)
                    }
                }
                .pickerStyle(WheelPickerStyle())
                .frame(width: 100)
                
                Text("分")
                    .font(.title)
            }
            .padding()
            
            // 显示格式化后的时间
            Text(formattedTime)
                .font(.largeTitle)
                .padding()
        }
    }
    
    private var formattedTime: String {
        return "\(selectedHour)时 \(selectedMinute)分" // 返回带单位的格式化字符串
    }
}

SwiftUI 提供了几种内置的 PickerStyle，包括：

• 1.DefaultPickerStyle：这是 Picker 的默认样式。

• 2.WheelPickerStyle：一个类似滚轮的选择器样式。

• 3.SegmentedPickerStyle: 按钮分段样式的选择器，在 macOS 上显示为按钮组，而在 iOS 上显示为分段控件