HarmonyOS 鸿蒙实现类似的支付宝时间选择器

应用场景

当我们在某个平台有保存内容或者数据的时候，平台都会给用户一个筛选功能，方便统计用户根据筛选条件来查看筛选条件内的数据，平台侧会做出相应的统计。那么我们的查询数据内容是消费记录的话，就会根据时间段来进行数据的筛选，这时候我们要用到什么功能？就是我们的通过时间段或者准确时间去筛选的功能。

那么这样一个功能在应用程序中能起到什么作用？

1. 用户交互：

   • 简化输入：通过提供一个直观的界面来选择日期和时间，而不是让用户手动输入，减少了错误的可能性并提高了用户体验。
   • 提高效率：用户可以快速地选择需要的时间，而不需要手动键入每个字符，尤其是在移动设备上这尤为重要。

2. 数据验证：

   • 格式一致性：确保所有用户输入的时间都遵循相同的格式，这有助于后端处理和存储数据。
   • 限制选择：可以根据需求限制用户只能选择某些日期或时间范围内的值，例如只允许未来日期的选择。

3. 数据展示：

   • 过滤功能：允许用户筛选数据，如在财务记录应用中查看特定月份的交易记录。
   • 时间范围选择：在分析工具中，用户可以选择特定的时间段来查看报表或统计数据。

   实现效果

   时间选择器组件就是今天我们要了解的，但是所有的ui框架中都不会有刚好合适的组件，那么效果就需要我们去定义，那么我们在HarmoneyOS中想要实现时间选择器效果要如何实现呢?

   首先我们来看一下某宝实现的效果。

   
   

   可以看到支付宝在点击时间显示后滚动下方的时间选择组件，对应的时间显示组件显示出相对应的内容。

   那么我们在鸿蒙中虽然没有显示所有功能的组件，但是也有显示时间的组件。

   这个组件就是我们的DatePicker组件。

   那我们DatePicker的作用是什么呢？

   他是一个，日期选择器组件，用于根据指定日期范围创建日期滑动选择器。

   接口实现是

   DatePicker(options?: DatePickerOptions)

   根据指定范围的Date创建可以选择日期的滑动选择器。

   可以实现时间选择的效果
   

   要实现时间显示，我们只需要使用text组件来根据点击左右两侧的事件，再获取对应的内容就可以了，头部代码实现如下

   首先我们定义一个参数来标记当前点击的是开始时间还是结束时间

   @State selectIndex:number=0

   当我们没有点击结束时间的时候，我们的结束时间状态如下

   要实现这样的效果，需要定义一个状态参数

   counter:number=0

   当我们点击到结束时间时counter++

   这样就可以实现一开始是结束时间显示，点击后修改为当前选择时间的效果

   既然我们已经有了时间选择组件，那我们就可以拿到对应的年月日，要想显示再文本组件中，我们还需要定义年、月、日的参数，因为我们要有两个时间显示，所以需要定义两份。（代码如下）

     @State year:number=new Date().getFullYear()

     @State month:number=new Date().getMonth()+1

     @State day:number=new Date().getDate()

     @State rightYear:number=new Date().getFullYear()

     @State rightMonth:number=new Date().getMonth()+1

     @State rightDay:number=new Date().getDate()

   都定义完成后，我们来实现ui布局跟定义参数

   头部布局

   这时候我们把这两个定义的参数结合起来放入我们的布局绘制中

     Row(){

             Column(){

               Text(this.year.toString()+"-"+this.month.toString()+"-"+this.day.toString())

                 .fontSize(16)

                 .fontColor( this.selectIndex===0?"#ff11aeec":$r(‘app.color.color_999’))

             }

             .margin({right:10})

             .onClick(()=>{

               this.selectIndex=0

             })

             Text(“至”)

             Column(){

               Text(this.counter>0?this.rightYear.toString()+"-"+this.rightMonth.toString()+"-"+this.rightDay.toString():‘结束时间’)

                 .fontSize(16)

                 .fontColor(this.selectIndex===1?"#ff11aeec":$r(‘app.color.color_999’))

             }

             .margin({left:10})

             .onClick(()=>{

               this.selectIndex=1

               this.counter++

             })

         }

         .margin({top:30})

   这样我们就实现了头部的效果，然后我们把DatePicker 添加进去，在组件的函数onChange((value: DatePickerResult) 中获取value 。这就是组件切换时选中的时间，我们把时间都赋给我们定义的参数

     .onChange((value: DatePickerResult) => {

             if (this.selectIndex===1) {

               this.rightYear=value.year

               this.rightMonth=value.month+1

               this.rightDay=value.day

             }else {

               this.year=value.year

               this.month=value.month+1

               this.day=value.day

             }

           })

   因为我们定义的参数都用了@state修饰，所以数据修改后会自动修改，不用担心ui变化。

   到这里，我们的时间选择器功能就实现了。

   ​​​​​​​