我们在上一章回中介绍了"如何在任意位置显示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'类型,主要用来存放被选择的内容;
3.示例代码
NumberPicker(