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

小黄要努力
发布于 2024-7-31 13:00
浏览
0收藏

应用场景

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

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

实现效果

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

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

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

实现效果

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

 #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应用开发实战《实现账单时间选择器》-鸿蒙开发者社区

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
收藏
回复
举报
回复
    相关推荐