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

小黄要努力

发布于 2024-7-31 13:00

浏览

0收藏

应用场景

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》-鸿蒙开发者社区

实现效果

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》-鸿蒙开发者社区

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

实现效果

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》-鸿蒙开发者社区

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

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

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

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

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

接口实现是

DatePicker(options?: DatePickerOptions)

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

可以实现如下效果

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》-鸿蒙开发者社区

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

效果实现

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

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

@State selectIndex:number=0

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》-鸿蒙开发者社区

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

counter:number=0

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

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》-鸿蒙开发者社区

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

@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布局跟定义参数

头部布局

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

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》-鸿蒙开发者社区

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变化。

运行后实现效果如下

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》-鸿蒙开发者社区