第二百零九回

文章目录

  • 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'类型,主要用来存放被选择的内容;

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官方不提供这样的组件呢?欢迎大家在评论区交流与讨论。

你可能感兴趣的:(一起Talk,Flutter吧,前端,移动开发Flutter)