Color Picker & Date picker

Color Picker

SwiftUI 提供的颜色选择器显示当前选定的颜色和一个浮动的颜色选择器，允许用户从颜色轮选择新颜色。

使用颜色选择器

颜色选择器必须始终嵌套在一个视图内。

@State var color = Color.blue

ColorPicker("选择颜色", selection: $color)

默认情况下，颜色选择器启用了不透明度值(opacity value)。如果要禁用它，需要将 supportsOpacity 参数设置为false。

ColorPicker("选择颜色", selection: $color, supportsOpacity: false)

最终代码

在此示例代码中，我们构建一个简单的应用程序，允许用户选择两种颜色，这些颜色将应用于渐变的圆角矩形。

struct ContentView: View {
    @State var color = Color.blue
    @State var color2 = Color.purple

    var body: some View {
        VStack {
            ColorPicker("颜色 1", selection: $color)
            ColorPicker("颜色 2", selection: $color2)
            RoundedRectangle(cornerRadius: 30)
                .fill(LinearGradient(gradient: Gradient(colors: [color, color2]), startPoint: .topLeading, endPoint: .bottomTrailing))
        }
        .padding()
    }
}

吸管工具

颜色选择器还带有吸管工具。这允许用户从屏幕上的任何位置选择颜色。请注意，这仅在iOS 模拟器中有效，而不适用于 SwiftUI 的预览。

参考资料

Apple 介绍如何使用iOS选择器，以及菜单和操作

Date picker

DatePicker允许用户使用滚动轮设置特定日期。

DatePicker

首先，将您的日期设置为 @State 状态。此日期选择器绑定到selectedDate属性。

struct ContentView: View {
    @State var selectedDate = Date()

    var body: some View {
        DatePicker("日期", selection: $selectedDate)
    }
}

Date Picker 包装器

可以通过包装 Text 或 Image 来更改UI。

DatePicker(selection: $selectedDate) {
    Text("选择日期")
        .font(.title3)
}

日期范围

Date() 方法允许用户选择今天之前的任何日期。或者，我们也可以将其设置为选择从当前日期之后的日期。

DatePicker("范围", selection: $selectedDate, in: ...Date())

时间选择器

与其选择特定日期，我们也可以让用户选择小时和分钟。

DatePicker("时间", selection: $selectedDate, displayedComponents: .hourAndMinute)

日期和时间

我们可以通过使用数组将日期和 hourAndMinute 组合在一起。

DatePicker("日期和时间", selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])

选择日期和时间

我们还可以同时选择日期和时间。

DatePicker("日期和时间选择器",
    selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])

GraphicalDatePickerStyle()

设置 datePickerStyle 参数为 GraphicalDatePickerStyle()，可以立即显示完整的日历用户界面，而不是在轻触时显示模态框。

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