第一百九十一回 自定义TimePicker：一

我们在上一章回中介绍了"如何自定义一个可选择的星期组件"相关的内容，本章回中将介绍" 自定义TimpePicker".闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在前面间章回中介绍过TimePicker,如果有看官忘记的话，可以点击这里查看。不过它的样式和内容都是固定的，无法修改，因此我们准备自定义一个TimePicker组件，该组件只能选择小时和分钟，而且界面比较简洁，详细如下图所示。本章回中将介绍如何实现这种TimePicker组件。

2. 思路与方法

2.1 整体思路

我们把效果图中的组件拆分成四个小组件：

• 一个蓝色背景用来显示当前被选择的日期，这个可以通过Containe组件实现；
• 两个滑轮分别用来选择小时和分钟，这个可以使用三方包组件实现；
• 一个文本用来显示小时和分钟之间的冒号，这个可以使用Text组件实现；

我们分别实现这四个组件后还需要把它们组合在一起，这样才是完整