【SwiftUI基础篇】6 Picker(选择)类控件集之ColorPicker(颜色)、DatePicker(时间)

SwiftUI内置了很多好用的控件，本文主要介绍所有的Picker类控件的合集。

一、Picker 选择项

在 Picker 中通过 Text 加 .tag 的方式添加选项，并在 selection 输入中绑定用户选择的结果。

首先定义一个喜欢类型的枚举类型并初始化：

@State private var selectedFlavor = Flavor.chocolate

然后就可以使用tag监听用户的选择了。

Picker("口味", selection: $selectedFlavor) {
    Text("巧克力").tag(Flavor.chocolate)
    Text("香草").tag(Flavor.vanilla)
    Text("草莓").tag(Flavor.strawberry)
}
Text("您选择的是: (selectedFlavor.value)")

Picker 也可以结合 ForEach，直接为某个枚举的所有情况制作选项， 注意，在文档中提到，如果类型匹配的话，ForEach 会自动添加 tag。

Picker("请选择一个配料：", selection: $suggestedTopping) {
    ForEach(Flavor.allCases) { flavor in
        Text(flavor.value)
            .tag(flavor.suggestedTopping)
    }
}
Text("推荐配料：(suggestedTopping.value)")
//下面是绑定数据
    @State private var selectedFlavor = Flavor.chocolate
    @State var suggestedTopping: Topping = .cookies

可以使用样式定义.pickerStyle选项的显示类型：

VStack {
    Picker("口味", selection: $selectedFlavor) {
        ForEach(Flavor.allCases) { flavor in
            Text(flavor.value).tag(flavor)
        }
    }
    Picker("配料", selection: $selectedTopping) {
        ForEach(Topping.allCases) { flavor in
            Text(flavor.value).tag(flavor)
        }
    }

    Text("您选择的口味是：(selectedFlavor.value)")
    Text("您选择的配料是：(selectedTopping.value)")
}
// 可以通过 .pickerStyle 来改变 Picker 的样式
.pickerStyle(SegmentedPickerStyle())

DefaultPickerStyle 默认的选择器样式，基于选择器的上下文。

InlinePickerStyle 一个PickerStyle，其中每个选项都与当前容器中的其他视图内联显示。

MenuPickerStyle 一种选择器样式，当用户按下按钮时将选项作为菜单显示，当嵌套在较大的菜单中时将选项作为子菜单显示。

RadioGroupPickerStyle 将选项作为一组单选按钮呈现的选择器样式(仅支持macOS 10.15+)。

WheelPickerStyle 一种选择器样式，以可滚动的滚轮显示所选的选项和一些邻近的选项。

使用枚举类型与Picker实现选项卡：http://www.55mx.com/ios/113.html

二、ColorPicker 颜色选择控件

SwiftUI内置颜色选择ColorPicker控件，允许用户选择一种颜色。颜色要使用它需要创建一个Color可以使用@State或类似属性进行更改的属性，基础初始化颜色选择器只需要传入一个描述性的 String 和需要绑定的颜色即可，点击右侧的圆圈就会弹出丰富的颜色选择框。

struct ContentView: View {
    @State private var bgColor = Color.red //监听颜色改变后的值
    var body: some View {
        VStack {
            ColorPicker("改变背影颜色", selection: $bgColor)
                .padding()
                .foregroundColor(.white)
                .font(.largeTitle)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(bgColor)//应用背景颜色
        .ignoresSafeArea(.all,edges:.all)
    }
}

关闭颜色选择器的透明度选择：

 ColorPicker("关闭了透明度选择", selection: $bgColor, supportsOpacity: false)

 和 Button 类似，ColorPicker 可以在末尾传入一个视图作为标签视图：

ColorPicker(selection: $bgColor) {
      Text("选择喜欢的颜色")
}

三、DatePicker 时间/日期选择控件

DatePicker 的使用非常简单，类似上面的ColorPicker，只需要绑定上 Date 变量即可在使用时点击右侧的时间（日期），即可进行选择。Swift有一个专用的日期类型：Date。要使用DatePicker和上面的ColorPicker一样先要从@State这样的属性开始：

struct ContentView: View {
    @State private var wakeUp = Date()//定义一个当前时间
    var body: some View {
        VStack {
            DatePicker("请选择一个时间", selection: $wakeUp)
        }
    }
}

然后，您可以将其绑定到日期选择器上，现在，您可能会认为该标签看起来很丑陋，并尝试用以下标签替换它：

Form {
    DatePicker("选择时间", selection: $wakeUp)
}

除了使用上面的表单之外，另一种方法是使用labelsHidden()修饰符，如下所示：

DatePicker("Please enter a date", selection: $wakeUp)
        .labelsHidden()

该标签仍包含原始标签，因此屏幕阅读器可以将其用于VoiceOver，但现在它们在屏幕上不再可见-日期选择器将占据屏幕上的所有水平空间。

日期选择器为我们提供了几个配置选项，可以控制它们的工作方式。首先，我们可以displayedComponents用来决定用户应该看到哪种选项：

• 如果您不提供此参数，则用户会看到一天，一小时和一分钟。
• 如果使用.date用户，请查看月，日和年。
• 如果您使用.hourAndMinute用户，则仅会看到小时和分钟。

因此，我们可以选择这样的精确时间：

DatePicker("选择小时", selection: $wakeUp, displayedComponents: .hourAndMinute)

displayedComponents: [.hourAndMinute, .date] 是一个数组，支持多个时间限制。

我们还可以通过datePickerStyle设置一下选择器的样式：

.datePickerStyle(GraphicalDatePickerStyle()) //日期样式
.labelsHidden() //隐藏“时间”label,部分样子会自动把label的文字隐藏

1. CompactDatePickerStyle  日期选择器样式，以紧凑的文本格式显示组件。 iOS 14.0+
2. DefaultDatePickerStyle 日期选择器的默认样式。 iOS 13.0+
3. FieldDatePickerStyle 在可编辑字段中显示组件的日期选择器样式。不支持IOS
4. GraphicalDatePickerStyle 显示交互式日历或时钟的日期选择器样式。 iOS 14.0 +
5. StepperFieldDatePickerStyle 在可编辑字段中显示组件的系统样式，带有可以递增/递减所选组件的相邻步进。 不支持IOS
6. WheelDatePickerStyle 日期选择器样式，将每个组件显示为可滚动轮中的列。iOS 13.0+

 

最后，有一个in参数与之作用相同Stepper：我们可以为它提供一个日期范围，并且日期选择器将确保用户不能选择超出范围。

现在，我们已经使用一段时间了，您已经习惯于看到诸如1 ... 5或的东西0 ..< 10，但是我们也可以将Swift日期与范围一起使用但要注意传入的时间范围必须是 CloseRange，也就是 ”...”，而不能是 "..<"。例如：

struct ContentView: View {
    @State private var wakeUp = Date()//定义一个当前时间
    let now = Date()//设置为当前日期和时间
    // addingTimeInterval方法可以在时间基础上增加多少秒
    let tomorrow = Date().addingTimeInterval(86400)
    var body: some View {
        Form{
            //限制时间范围的选择
            DatePicker("现在到明天", selection: $wakeUp, in: now ... tomorrow)
            //限制从现在开始到未来
            DatePicker("现在到未来", selection: $wakeUp, in: now... )
            //限制从明天开始到未来
            DatePicker("明天到未来", selection: $wakeUp, in: tomorrow... )
            //限制明天开始到过去
            DatePicker("明天到过去", selection: $wakeUp, in: ...tomorrow)
            //限制从现在到过去
            DatePicker("现在到过去", selection: $wakeUp, in: ...now)
        }
    }
}

还不要忘记对时间进行格式化显示：

struct ContentView: View {
    //定义一个时间格式化方式
    let dateFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateStyle = .long
        //格式化时间以中文方式显示
        formatter.locale = Locale(identifier: "zh-CN")
        formatter.dateFormat = "yyyy-MM-dd HH:mm:ss" //初始化日期格式
        return formatter
    }()
    
    @State private var birthDate = Date()
    var body: some View {
        VStack {
            DatePicker(selection: $birthDate, in: ...Date(), displayedComponents: .date) {
                Text("选择一个时间")
            }
            Text(dateFormatter.string(from: birthDate))//中文显示
            //另一格式化时间的显示方式
            Text("时间是 (birthDate, formatter: dateFormatter)")
        }
    }
}

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/120