我们在上一章回中介绍了"如何实现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组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!