选择器弹窗

选择器弹窗经常用于显示特定的信息或者选项， 比较复杂。四大类

• 日历选择器弹窗
• 日期滑动选择器弹窗
• 时间滑动选择器弹窗
• 文本滑动选择器弹窗

这种弹窗使用的频率是比较高的， 相较于之前的集中弹窗比较复杂，我们自定义实现也需要不少成本。可以用这些现成的。

日历选择器弹窗

API

使用起来比较简单，就是调用

CalendarPickerDialog.show(options?: CalenderDialogOptions):void

API图示

日历选择器涉及到了一个比较常用的类--Date。 在此特意将Date类注解出来，便于更顺手的查阅使用。

下图主要是对CalenderDilaogOptions进行描述

关于Date类的API及打印方式

代码示例

CalendarPickerDialog.show({
            backgroundColor: 'red',
            // acceptButtonStyle :
            onAccept: () => {
              console.log(`回调onAccept`)
            },
            onCancel: () => {
              console.log(`回调onCancel`)
            },
            onChange: (date) => {
              console.log(`toString()=${date.toString()}`)
              console.log(`toDateString()=${date.toDateString()}`)
              console.log(`toTimeString()=${date.toTimeString()}`)
              console.log(`toLocaleString()=${date.toLocaleString()}`)
              console.log(`toUTCString()=${date.toUTCString()}`)
              console.log(`toISOString()=${date.toISOString()}`)
              console.log(`toJSON()=${date.toJSON()}`)
              console.log(`toLocaleDateString()=${date.toLocaleDateString()}`)
              console.log(`toLocaleTimeString()=${date.toLocaleTimeString()}`)

              console.log(`valueOf()=${date.valueOf()}`)
              console.log(`getTime()=${date.getTime()}`)
              console.log(`getFullYear()=${date.getFullYear()}`)
              console.log(`getUTCFullYear()=${date.getUTCFullYear()}`)
              console.log(`getMonth()=${date.getMonth()}`)
              console.log(`getUTCMonth()=${date.getUTCMonth()}`)
              console.log(`getDay()=${date.getDay()}`)
              console.log(`getUTCDay()=${date.getUTCDay()}`)
              console.log(`getDate()=${date.getDate()}`)
              console.log(`getUTCDate()=${date.getUTCDate()}`)
              console.log(`getHours()=${date.getHours()}`)
              console.log(`getUTCHours()=${date.getUTCHours()}`)
              console.log(`getMinutes()=${date.getMinutes()}`)
              console.log(`getUTCMinutes()=${date.getUTCMinutes()}`)
              console.log(`getSeconds()=${date.getSeconds()}`)
              console.log(`getUTCSeconds()=${date.getUTCSeconds()}`)
              console.log(`getMilliseconds()=${date.getMilliseconds()}`)
              console.log(`getUTCMilliseconds()=${date.getUTCMilliseconds()}`)
              console.log(`getTimezoneOffset()=${date.getTimezoneOffset()}`)

            },
            onWillAppear: () => {
              console.log(`onWillAppear`)
            },
            onDidAppear: () => {
              console.log(`onDidAppear`)
            },
            onWillDisappear: () => {
              console.log(`onWillDisappear`)
            },
            onDidDisappear: () => {
              console.log(`onDidDisappear`)
            }
        })

打印：

缺点

• 没有办法用代码让弹窗消失， 没有相关API，只能通过用户选择。这点不是很好。
   

日期滑动选择器弹窗

API

代码案例

this.getUIContext().showDatePickerDialog({
            lunar: true, //展示农历
            lunarSwitch : true, //展示农历切换按钮
            showTime : true, //同时展示时间选择
            useMilitaryTime : true, //使用24小时制
            onWillAppear: () => {
              console.log(`onWillAppear`)
            },
            onDidAppear: () => {
              console.log(`onDidAppear`)
            },
            onWillDisappear: () => {
              console.log(`onWillDisappear`)
            },
            onDidDisappear: () => {
              console.log(`onDidDisappear`)
            },
            onAccept: () => {
              console.log(`回调onAccept`)
            },
            onCancel: () => {
              console.log(`回调onCancel`)
            },
            onDateChange: (date) => {
              console.log(`onDateChange date=${date.toString()}`)
            },
            onDateAccept: (date) => {
              console.log(`onDateAccept date=${date.toString()}`)
            },
          })

日志：

时间滑动选择器弹窗

API

代码示例

 this.getUIContext().showTimePickerDialog({
            useMilitaryTime : false,
            disappearTextStyle : {color : 'red'},
            selectedTextStyle : {color : 'blue'},
            textStyle : {color : 'green'},
            acceptButtonStyle : {type: ButtonType.Normal, primary: true,  role : ButtonRole.NORMAL},
            cancelButtonStyle : {type: ButtonType.Normal, role : ButtonRole.NORMAL},


            onWillAppear: () => {
              console.log(`onWillAppear`)
            },
            onDidAppear: () => {
              console.log(`onDidAppear`)
            },
            onWillDisappear: () => {
              console.log(`onWillDisappear`)
            },
            onDidDisappear: () => {
              console.log(`onDidDisappear`)
            },
            onAccept: (value)=> {
              console.log(`onAccept result=${value.hour}:${value.minute}:${value.second}`)
            },
            onCancel: ()=> {
              console.log(`onCancle`)
            },
            onChange: (value)=> {
              console.log(`onAccept result=${value.hour}:${value.minute}:${value.second}`)
            },
          })

日志

文本滑动选择器弹窗

API

代码案例

Text('文本滑动选择器弹窗')
        .id('TextPickerDialog')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          top: { anchor: 'TimePickerDialog', align: VerticalAlign.Bottom },
          start: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .onClick(()=>{
            this.getUIContext().showTextPickerDialog({
              range: [`北京`, `上海`, `广州`, `天津`, `深圳`, `长沙`, `成都`, `重庆`, `香港`, `澳门`, `济南`, `郑州`],
              value : `北京`,
              selected : 3,
              onWillAppear: () => {
                console.log(`onWillAppear`)
              },
              onDidAppear: () => {
                console.log(`onDidAppear`)
              },
              onWillDisappear: () => {
                console.log(`onWillDisappear`)
              },
              onDidDisappear: () => {
                console.log(`onDidDisappear`)
              },
              onAccept: (value)=> {
                console.log(`onAccept result=${value.value}:${value.index}`)
              },
              onCancel: ()=> {
                console.log(`onCancle`)
              },
              onChange: (value)=> {
                console.log(`onChange result=${value.value}:${value.index}`)
              },
              onScrollStop: (result) => {
                console.log(`onScrollStop result=${result.value}:${result.index}`)
              }
            })
        })

日志x·想·