SwiftUI中DatePicker和ColorPicker的用法介绍

DatePicker

DatePicker是特殊类型的Picker，当我们需要要求用户指定日期时，我们可以使用它。
下面是一个简单的创建DatePicker的示例：

上面快速的创建了一个DatePicker，绑定了一个@State修饰的变量，用来记录用户的选择，并将该变量通过Text显示出来。

该DatePicker默认显示了年月日时分等信息。

displayedComponents
初始化的时候除了要绑定的变量，还可以设置要显示的组成部分，displayedComponents。
该参数类型为DatePickerComponents， 该参数可以设置为.date以及.hourAndMinute，也可以组合使用。如下：

// 只显示年月日部分
DatePicker("Select Date", selection: $selectedDate, displayedComponents: [.date])

// 只显示时分部分
DatePicker("Select Date", selection: $selectedDate, displayedComponents: [.hourAndMinute])

// 默认设置，显示年月份时分部分
DatePicker("Select Date", selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])

设置选择范围
DatePicker支持设置日期的选择范围，初始化方法如下：

上面初始化方法中有个in参数，给in传一个Date区间即可，代码中创建了startDate和endDate，所以选择的日期不在这个区间内，时间滚桶自动滚到有效的时间内。

外观设置
DatePicker支持一些简单的外观设置，比如提示文字样式，背景色等。如下图

      DatePicker("Select Date", selection: $selectedDate, in: startDate...endDate)
        .foregroundColor(.green)
        .font(.subheadline)
        .padding()
        .background(
          Color.gray.opacity(0.3)
            .cornerRadius(20)
        )
        .padding()

如果要修改弹出的选择器的内部的文字的颜色，需要加上.accentColor()，如下

总体来说，想完全自定义是不可能的。

DatePicker种类选择
DatePicker有以下几种:
DefaultDatePickerStyle：默认样式的日期选择器，根据平台自动选择合适的样式。
CompactDatePickerStyle：紧凑样式的日期选择器，适合在有限空间内显示。
GraphicalDatePickerStyle：图形样式的日期选择器，以图形化的方式显示日期和时间。
WheelDatePickerStyle：滚轮样式的日期选择器，通过滚动来选择日期和时间。

默认的样式就是CompactDatePickerStyle样式。
设置方法如下，在DatePicker上添加修饰符：

.datePickerStyle()

下面分别看一下这几种样式：
CompactDatePickerStyle

GraphicalDatePickerStyle

WheelDatePickerStyle

ColorPicker

ColorPicker是最近iOS版本中新增的功能之一，当我们想让用户从调色板中选择颜色时，它确实简化了我们的生活。

下面是一个简单的初始化方法：

struct ColorPickerDemo: View {

  @State private var selectedColor: Color = .black

  var body: some View {
    VStack(spacing: 40) {
      RoundedRectangle(cornerRadius: 25.0)
        .fill(selectedColor)
        .frame(width: 300, height: 100)

      ColorPicker("Color Selection", selection: $selectedColor)
        .padding()

      Spacer()
    }
  }
}

还是老样子，初始化需要绑定一个@State修饰的变量，用来记录用户的选色，以及UI刷新。效果如下：

ColorPicker也支持一些外观设置，更多设置大家可以不断的探索。

.foregroundColor(.green)
.font(.title)
.background(Color.gray.opacity(0.3))

ColorPicker的初始化方法里面也支持设置Label闭包，该闭包自定义ColorPicker左侧的提示文字以及样式，可以自定义，更加灵活一些。

supportsOpacity
在初始化的时候还可以设置supportsOpacity这个参数，主要是决定是否在选色板上显示可调透明头的功能，即选色板上opacity拖动条。默认是true，即显示。

总结

本篇文章主要介绍了DatePicker和ColorPicker的创建和一些样式，以及一些可以设置的外观修饰符。希望通过文章的介绍，可以帮助大家创建适合大家特定需求的选择器，并增强应用程序的用户体验。

最后，希望能够帮助到有需要的朋友，如果觉得有帮助，还望点个赞，添加个关注，笔者也会不断地努力，写出更多更好用的文章。