回复
#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现账单时间选择器》 原创
小黄要努力
发布于 2024-7-31 13:00
浏览
0收藏
应用场景
当我们在某个平台有保存内容或者数据的时候，平台都会给用户一个筛选功能，方便统计用户根据筛选条件来查看筛选条件内的数据，平台侧会做出相应的统计。那么我们的查询数据内容是消费记录的话，就会根据时间段来进行数据的筛选，这时候我们要用到什么组件？
实现效果
没错，就是我们的时间选择器组件，但是所有的ui框架中都不会有刚好合适的组件，那么效果就需要我们去定义，那么我们在HarmoneyOS中想要实现时间选择器效果要如何实现呢?
首先我们来看一下支付宝实现的效果。首先我们来看一下支付宝实现的效果。
实现效果
没错，就是我们的时间选择器组件，但是所有的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变化。
运行后实现效果如下
到这里，我们的时间选择器功能就实现了。
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
标签
赞
收藏
回复
相关推荐
