应用场景

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》_时间选择器

实现效果

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》_数据_02

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

实现效果

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》_时间显示_03

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

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

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

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

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

接口实现是

DatePicker(options?: DatePickerOptions)

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

可以实现如下效果

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》_时间显示_04


      这样的话我们下半部分的效果就实现了。


效果实现


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


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


@State selectIndex:number=0


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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》_数据_05


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

counter:number=0

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

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》_时间显示_06

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

@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()
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

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


头部布局


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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》_时间显示_07

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
          }

        })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.

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

运行后实现效果如下

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》_数据_08

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