第二百零七回

本文主要是介绍第二百零七回，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们在上一章回中介绍了"如何自定义一个可选择的星期组件"相关的内容，本章回中将介绍"自定义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的宽度再除2left: (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组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!

这篇关于第二百零七回的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---