75142913在线留言
【SwiftUI基础篇】6 Picker(选择)类控件集之ColorPicker(颜色)、DatePicker(时间)_IOS开发_网络人

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

Kwok 发表于:2021-04-02 10:02:55 点击:2 评论: 0

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.neter8.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)")
        }
    }
}
除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/120.html
标签:颜色时间Kwok最后编辑于:2021-04-03 14:03:28
0
感谢打赏!

《【SwiftUI基础篇】6 Picker(选择)类控件集之ColorPicker(颜色)、DatePicker(时间)》的网友评论(0)

本站推荐阅读

热门点击文章