Flutter时间滚轮选择器

1,796 阅读1分钟

在做Flutter项目时,有一个需求是实现一个可以选择开始时间和结束时间的时间选择器(时间选择范围为当前手机时间往前推10年起止时间,默认选择时间为当前手机时间往前推90天起止时间)。在代码仓库pub.dev中找不到合适的插件,于是自己就手动实现了这个效果,写篇文章记录一下其中的坑(效果图如下)。

1.png flutter提供了滚轮控件CupertinoPicker,通过计算获取年份滚轮、月份滚轮、日期滚轮数据源,渲染数据即可,但是在实现中遇到了一个坑,着实折腾了我一下。

 如果控件CupertinoPicker的数据源发生动态变化,官方没有提供方法重新渲染该控件。比如当前时间滚轮选择的是2020-10-09,年份滚轮选择了2021年,对应的月份滚轮数据源只有1-8月,这个时候月份滚轮数据源是[1,2,3,4,5,6,7,8],而月份滚轮显示的还是1-12月可选范围,显然月份的数据源没有渲染成功。 当flutter控件无法正常渲染时,我们就应该首先想到关键字Key。 我们在开始定义一个Key monthKey=UniqueKey();然后在控件实现时绑定上monthKey,CupertinoPicker.builder( key: monthKey, backgroundColor: Colors.white, itemExtent: 44, childCount: monthList.length...),最后在想让月份滚轮实现渲染的地方加上代码即可实现 setState(() {monthKey = UniqueKey();});

##感悟 其实只要想让flutter的某个控件强制刷新,都可以用以上方法来实现。