第一百六十五回 wheelChooser组件

我们在上一章回中介绍了"如何实现Numberpicker"相关的内容，本章回中将介绍 wheelChoose组件.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的wheelChooser是一个三方包，它除了像NumberPicker一样创建数字选择功能外，它可以选择其它的组件当作被选择的对象，相当于在选择数字功能的基础上做了扩展，它扩展了被选择内容的范围。我们将在本章回中详细介绍该组件的使用方法。

2. 使用方法

和其它的组件一样WheelChooser组件提供了相关的属性来控制自己，下面是常用的属性。

• datas属性：该属性是数组类型,数组中的值就是被选择的值，因此它用来控制选择数值的范围；
• horizontal属性：用来控制选择的方向，分水平垂直两个方向；
• onValueChanged属性：该属性是方法类型，选择某个数值时会回调该属性对应的方法；
• isInfinite属性：该属性用来控制是否循环显示被选择的内容；

除了这些属性外，该组件还提供了一些工厂方法，通过工厂方法快速创建被选择的内容，比如WheelChooser.number()可以快速创建数字选择器，我们将在稍后的小节中通过示例代码来演示如何使用这些工厂方法。

3. 代码与效果

3.1 示例代码

WheelChooser(
  ///控制滑动方向
  horizontal: true,
  ///使用装饰可以在选择的内容上方和下方显示一条横线
  selectTextStyle:TextStyle(
    ///单独使用和复合使用装饰
    // decoration: TextDecoration.overline,
    decoration: TextDecoration.combine([TextDecoration.underline,TextDecoration.overline]),
  ) ,
  ///是否循环显示
  isInfinite: true,
  onValueChanged: (s) => debugPrint('$s selected'),
  datas: [0,1,2,3,34,5,6,7,8,9],
),

///使用工厂方法，可以创建任意的选择器
SizedBox(
  height: 150,
  ///可以添加任意的组件，这里添加的是icon
  child: WheelChooser.custom(
    onValueChanged: (value) {},
    isInfinite: true,
    children: const [
      Icon(Icons.looks_3,size: 36,),
      Icon(Icons.looks_two,size: 36,),
      Icon(Icons.looks_one,size: 36,),
    ]),
),
///使用两种工厂方法实现数字选择器
SizedBox(
  ///通过控制容器的大小，可以控制显示被选择内容的范围
  height: 100,
  child: WheelChooser.integer(
    ///显示内容的大小，默认48
    itemSize: 50,
    horizontal: true,
    isInfinite: true,
    onValueChanged: (value) => debugPrint('$value'),
    maxValue: 3,
    minValue: 0,
  ),
),
SizedBox(
  height: 100,
  child: WheelChooser.number(
    isInfinite: true,
    onValueChanged: (value) => debugPrint('$value'),
    maxValue: 3,
    minValue: 0,
  ),
),
///可以选择任意对象当作被选择对象，因为value是泛型
SizedBox(
  height: 200,
  child: WheelChooser.choices(
   isInfinite: true,
    onChoiceChanged: (value) {},
    choices:[
      WheelChoice(value: 1, title: 'one'),
      WheelChoice(value: 2, title: 'tow'),
      WheelChoice(value: 3, title: 'three'),
    ]
  ),
),

3.2 运行效果

我们在上面的示例代码中演示了wheelChooser的基本用法，同时演示了其它工厂方法的使用方法，编译并且运行上面的程序，可以得到以下的运行效果图：

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• wheelChooser是三主包中提供的组件，它可以实现数字选择功能；
• wheelChooser扩展了选择范围，不只是数字，其它的组件也可以被选择；
• whellChooser提供了很多工厂方法，通过工厂方法可以快速创建相关的选择器；

看官们，与"wheelChooser组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!