第二百零七回

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

1. 概念介绍

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

2. 思路与方法

2.1 整体思路

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

• 一个蓝色背景用来显示当前被选择的日期，这个可以通过Containe组件实现；
• 两个滑轮分别用来选择小时和分钟，这个可以使用三方包组件实现；
• 一个文本用来显示小时和分钟之间的冒号，这个可以使用Text组件实现；
  我们分别实现这四个组件后还需要把它们组合在一起，这样才是完整的TimePicker组件，因为它们之间有重叠部分，所以使用Stack布局组件把这四个组件组合在一起。

2.2 实现方法

• 创建Container组件，并且把它修改成圆角和蓝色背景；
• 创建两个滑轮，我们使用三方包WheelChooser来实现；
• 在两个滑轮之间添加一个Text组件，用来显示小时与分钟之间的冒号；
• 把显示小时和分别的滑轮与冒号通过Row组件组合成一行；
• 使用Stack组件把上面创建的四个组件组合在一起，组合时使用Positioned组件控制它们的位置；

3. 示例代码

Stack(
  children: [
    ///深色方框用来显示当前被选择的数字
    Positioned(
      ///这个值是listHeight的值除2后再做一些偏移
      top: (screenHeight*2/3 - 128)/2 -26,
      // top: 300,
      ///这个16是左右的边距
      left: 16,
      width: screenWidth-16*2,
      height: 56,
      child:Container(
        decoration: BoxDecoration(
          color: Colors.blue[500],
          borderRadius: BorderRadius.circular(24),
        ),
      ),
    ),
    ///数字选择：使用两个滑轮实现
    Positioned(
      top: 0,
      ///这个值是屏幕宽度减去两个listWidth和sizeBox的宽度再除2
      left: (screenWidth-80*2-32)/2,
      child: Row(
        children: [
          Container(
            alignment: Alignment.center,
            child: WheelChooser(
              listWidth: 80,
              listHeight: screenHeight*2/3 - 128,
              itemSize: 56,
              startPosition: hour,
              selectTextStyle: const TextStyle(color: Colors.white),
              unSelectTextStyle: const TextStyle(color: Colors.black),
              onValueChanged: (value){
                hour = value;
              },
              datas: List<int>.generate(24, (index) => index),
            ),
          ),
          const SizedBox(width: 32,
            child: Text(" : ",style: TextStyle(fontSize: 24,color: Colors.white),),
          ),
          WheelChooser(
            listWidth: 80,
            listHeight: screenHeight*2/3 - 128,
            itemSize: 56,
            startPosition: minute,
            selectTextStyle: const TextStyle(color: Colors.white),
            unSelectTextStyle: const TextStyle(color: Colors.black),
            onValueChanged: (value){minute = value;},
            datas: List<int>.generate(60, (index) => index),
          ),
        ],
      ),
    ),
  ],
),

上面的示例代码完全按照实现方法中的内容来编写，并且在关键位置添加了注释。代码中需要注意的是深色背景的位置，它需要与滑动被选择的内容对齐，不然显示的效果
不太好。此外，时间中小时的选择范围是0-24，分钟的选择范围是0-60.大家可以依据项目的需求来调整。

4. 内容总结

最后，我们对本章回的做一个全面的总结：

• 官方提供的TimePicker不够简洁，而且不能修改外观和内容，使用不方便；
• 自定义的TimePicker只包含小时和分钟选择功能；
• 自定义TimePicker时先把它折成小组件，然后再把小组件组合在一起使用；
  看官们，与"自定义TimePicker组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!