第一百六十四回如何实现NumberPicker

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

文章目录

1.概念介绍
2.使用方法
- 2.1 NumberPicker
- 2.2 CupertinoPicker
3.示例代码
4.内容总结

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

1.概念介绍

我们在本章回中介绍的NumberPicker主要用来实现数字选择功能，比如选择年月日，当然也可以使用YearPicker实现，不过YearPicer是把年月日当作一个整体来选择，在界面上同时显示年月日三个选项，如果只想选择其中的某一个，而不显示其它选项，那么它就无能为力，因为该组件不支持这样去设置。

那么我们该如何实现这样的功能呢？答案是使用Numberpicker组件，或者CupertinoPicker组件。它们可以把年月日当作数字并且进行单独显示，本章回中将详细介绍这两个组件的使用方法。

2.使用方法

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<widget>类型，主要用来存放被选择的内容；

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}')),),],
),