建站申请,版面设计,电子商城网站建设的实训内容,直接打开文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 013pickers2.gif 我们在上一章回中介绍了如何实现Numberpicker相关的内容#xff0c;本章回中将介绍wheelChoose组件.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 概念… 文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 013pickers2.gif 我们在上一章回中介绍了如何实现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,///可以添加任意的组件这里添加的是iconchild: 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(///显示内容的大小默认48itemSize: 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. 内容总结 013pickers2.gif
最后我们对本章回的内容做一个全面的总结博客中有两个同名的文章第一个是错误的第二个是正确的
wheelChooser是三主包中提供的组件它可以实现数字选择功能wheelChooser扩展了选择范围不只是数字其它的组件也可以被选择whellChooser提供了很多工厂方法通过工厂方法可以快速创建相关的选择器 看官们与wheelChooser组件相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
