我们在上一章回中介绍了"如何自定义一个可选择的星期组件"相关的内容,本章回中将介绍" 自定义TimpePicker".闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在前面间章回中介绍过TimePicker,如果有看官忘记的话,可以点击这里查看。不过它的样式和内容都是固定的,无法修改,因此我们准备自定义一个TimePicker
组件,该组件只能选择小时和分钟,而且界面比较简洁,详细如下图所示。本章回中将介绍如何实现这种TimePicker组件。
2. 思路与方法
2.1 整体思路
我们把效果图中的组件拆分成四个小组件:
- 一个蓝色背景用来显示当前被选择的日期,这个可以通过Containe组件实现;
- 两个滑轮分别用来选择小时和分钟,这个可以使用三方包组件实现;
- 一个文本用来显示小时和分钟之间的冒号,这个可以使用Text组件实现;
我们分别实现这四个组件后还需要把它们组合在一起,这样才是完整