第一百六十五回 wheelChooser组件

我们在上一章回中介绍了"如何在任意位置显示PopupMenu"相关的内容，本章回中将介绍如何实现NumberPicker.闲话休提，让我们一起Talk Flutter吧。

1.知识回顾

我们可以使用showMenu方法来移动PopupMenu.该方法提供了相关的参数来控制PopupMenu，详细的参数如下：

• context属性：就是BuildContext类型的变量；
• position属性：主要用来控制PopupMenu的位置，它通过一个相对位置的矩形来控制PopupMenu的位置；
• item属性：主要用来存放PopupMenu,该属性的用法和上一章回中PopupMenuButton组件的itemBuilder属性完全相同；
  在给position属性赋值时比较困难，因为这个位置坐标不好调整，大家在调整时把握一个原则：以一个点的相对坐标为参考点，position中的坐标值都是相对于这个
  点。我也是经过反复调试并且查看它的源代码后才总结出这个原则，下面是计算位置的源代码：

final RelativeRect position = RelativeRect.fromRect(
  Rect.fromPoints(
  button.localToGlobal(offset, ancestor: overlay),
  button.localToGlobal(button.size.bottomRight(Offset.zero) + offset, ancestor: overlay),
  ),
Offset.zero & overlay.size,
);

我们在本章回中介绍的Numberpicker主要用来实现数字选择功能，比如选择年月日，当然也可以使用YearPicker实现，不过YearPicer是把年月日当作一个整体来
选择，在界面上同时显示年月日三个选项，如果只想选择其中的某一个，而不显示其它选项，那么它就无能为力，因为该组件不支持这样去设置。那么我们该如何实现这样
的功能呢？答案是使用Numberpicker组件，或者CupertinoPicker组件。它们可以把年月日当作数字并且进行单独显示，本章回中将详细介绍这两个组件的使用方法。

2.使用方法

和其它组件一样PopupMenuButton组件提供了相关的属性，通过这些属性可以控制该组件，下面是该组件中常用的属性：

• icon属性：主要用来控制按钮的图标，默认是三个白色的圆点；
• color属性：主要用来控制弹出菜单的背景颜色，默认是白色；
• shape属性：主要用来控制菜单的形状，默认是矩形；
• onOpened属性：该属性是方法类型，菜单弹出时回调；
• onCanceled属性：该属性是方法类型，菜单关闭时回调；
• onSelected属性：该属性是方法类型，选择某个菜单项时回调该方法；
• itemBuilder属性：该属性用来存放菜单中的选项，可以存放多个菜单选项；
  这些属性中，我们重点介绍一下itemBuilder属性，我们需要使用PopupMenuItem或者CheckedPopupMenuItem组件给它赋值。这两个组件中都包含两个常用属性，
• child属性：用来控制菜单选项的显示内容，通常使用Text组件或者Icon组件给它赋值；
• value属性：用来控制菜单选项的值，onSelected属性对应的方法中会把这个值传递给方法的参数；
  介绍完这些属性后，我们将在后面的小节中通过示例代码来演示它们的具体用法。

2.1 NumberPicker

和其它组件一样NumberPicker组件提供了相关的属性来控制自己，接下来我们将介绍该组件中常用的属性，掌握这些属性后就可以使用该组件了。

• maxValue属性：用来控制picker中可以选择的最大数值；
• minValue属性：用来控制picker中可以选择的最小数值；
• value属性：用来控制picker中当前选择的数值；
• step属性：用来控制picker滚动时的步进值，默认值为1；
• axis属性：用来控制选择的方向，分水平垂直两个方向；
• onChanged属性：该属性是方法类型，选择某个数值时会回调该属性对应的方法；

2.2 CupertinoPicker

除了NumberPicker可以实现数字选择功能外，CupertinoPicker组件也可以实现同样的功能，接下来我们介绍一下该组件的常用属性。

• backgroundColor属性：主要用来控制选择器的背景颜色；
• itemExtent属性：主要用来控制被选择内容的数量；
• onSelectedItemChanged属性：该属性是方法类型，选择某个数值时会回调该属性对应的方法；
• children属性：该属性是’List'类型，主要用来存放被选择的内容；

3.示例代码

NumberPicker(
  ///这个是当前选择的值
  value: _selectedValue,
  itemCount: 3,
  itemHeight: 60,
  decoration: BoxDecoration(
    border:Border.all(color: Colors.redAccent,width: 3,),
    borderRadius: BorderRadius.circular(15),
  ),
  ///设置picker方向
  axis: Axis.vertical,
  ///是否启用振动，默认不启用
  // haptics: true,
  
  ///循环显示
  infiniteLoop: true,
  ///设置值的范围
  maxValue: 9,
  minValue: 0,
  step: 1,
  ///不修改数值的话，选择内容不在选择框架内
  onChanged: (value){
    setState(() {
      _selectedValue = value;
    });
  },
),

child: CupertinoPicker(
  ///设置整个Picker的颜色
  backgroundColor: Colors.purpleAccent,
  itemExtent: 48,
  ///选择某个内容时回调此方法
  onSelectedItemChanged: (int value) {
    debugPrint('item $value is selected');
  },
  ///最好设置为true,不然会发生选项重叠的现象
  looping: true,
  children: [
    ...List.generate(5, (index) => SizedBox(width:60,height:48,child: Text('item ${index+1}')),),
  ],
),

在上面的代码中，我们提供了NumberPicker和CupertinoPicker两个组件的示例代码，代码中添加了相关的注释，这样方便大家理解代码。把上面的示例代码放到
某个页面中后就可以运行了，下面是程序的运行效果图。图中上方紫色背景的选择器是CupertinoPicker组件，下面的灰色背景的选择器是NumberPicker组件。

4.内容总结

最后，我们对实现数字选择功能的这两个组件做一个总结，主要包含它们的相同点和不同点：

• NumberPicker组件和CupertinoPicker组件都可以实现数字选择器；
• NumberPicker只有选择数字，CupertinoPicker可以选择任意的组件；
• NumberPicker由三方包提供，CupertinoPicker是官方包中自带的组件；
  看官们，与"如何实现Numberpicker"相关的内容就介绍到这里。此外，我还有一个疑问：NumberPicker也算是比较实用的组件，而且Android中自带该组件，为什
  么Flutter官方不提供这样的组件呢？欢迎大家在评论区交流与讨论。