Flutter - 控件之 Picker

CupertinoPicker
- 应用示例：选择性别

选择器picker，简单用于性别、省市地区、日期等选择功能。

CupertinoPicker

iOS风格的选择器，与showCupertinoModalPopup配合使用，在屏幕底部模态的显示选择器。
1、参数解析：

 CupertinoPicker({Key key,this.diameterRatio = _kDefaultDiameterRatio, //选择器高度与模拟圆柱直径比，默认1.1，视觉上类似iOS中pickerthis.backgroundColor = _kDefaultBackground, //选择器背景色，默认iOS版中灰色，可设置为nullthis.offAxisFraction = 0.0, //轴偏离系数this.useMagnifier = false, //使用放大镜与否，配合magnification值this.magnification = 1.0, //当前选中item与其他item相比放大倍数this.scrollController,@required this.itemExtent, //行高@required this.onSelectedItemChanged, //当前选中值改变时回调@required List<Widget> children, //所有可选择项bool looping = false, //滚动到头部或尾部是否循环滚动})

2、代码示例：

     Container(height: 200,child: CupertinoPicker(diameterRatio: 1.5,offAxisFraction: 0.2, //轴偏离系数useMagnifier: true, //使用放大镜magnification: 1.5, //当前选中item放大倍数itemExtent: 50, //行高backgroundColor: Colors.amber, //选中器背景色onSelectedItemChanged: (value) {print("value = $value, 性别：${pickerChildren[value]}");},children: pickerChildren.map((data) {return Center(child: Text(data),);}).toList(),),),

3、效果图:

应用示例：选择性别

CupertinoPicker配合showCupertinoModalPopup（弹出iOS风格的模态窗口）使用实现选择性别功能
1、创建选择器：

  List pickerChildren = ["男","女","保密",];int selectedValue = 0;String selectedGender = "男"; //选择性别Widget _buildGenderPicker() {return CupertinoPicker(itemExtent: 40,onSelectedItemChanged: (value) {print("选择性别：${pickerChildren[value]}");print("$value");setState(() {selectedValue = value;});},children: pickerChildren.map((data) {return Text(data);}).toList(),);}

2、模态弹出：

  //点击选择性别void _didClickSelectedGender() {selectedValue = 0;showCupertinoModalPopup(context: context,builder: (BuildContext context) {return Container(height: 250,child: Column(children: <Widget>[Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[FlatButton(color: Colors.white,onPressed: () {Navigator.pop(context);},child: Text("Cancle"),),FlatButton(color: Colors.white,onPressed: () {Navigator.pop(context);setState(() {selectedGender = pickerChildren[selectedValue];});},child: Text("OK"),),],),Expanded(child: DefaultTextStyle(style: TextStyle(color: Colors.black,fontSize: 22,),child: _buildGenderPicker(),),),],),);});}

3、效果预览：

Flutter - 控件之 Picker相关推荐

Flutter控件--Switch 和 SwitchListTile
flutter控件练习demo地址:github Switch(开关).SwitchListTile(带标题的开关) 和 AnimatedSwitch 一 Switch 1.1 简介 Switch & ...
自定义Flutter控件
在Flutter开发中,我们会经常和各种控件打交道,它们也能满足业务的大部分需求.但是,我们往往需要将多个控件组合起来,才能实现业务的需求,而且这样写出来的代码维护起来非常困难.因此,我们可以把那些需 ...
4、Flutter - 控件基础（二）ListView 列表展示数据、布局
ListView 列表展示数据.布局接上篇,几点注意事项与说明 1.创建工程项目的时候,存放路径不要有中文,有中文会有警告,而且后面可能会有一些未知的问题. 如果有中文路径,创建完工程移动工程位置的 ...
《Flutter 控件大全》第十个：AnimatedIcon
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit). 同时也欢迎关注我的Flutter公众号[老孟程序员],公众号首发Flutter的相关内容. ...
《Flutter 控件大全》第八个：AnimatedCrossFade
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit). 同时也欢迎关注我的Flutter公众号[老孟程序员],公众号首发Flutter的相关内容. ...
【MFC基础】13s时间控件DateTime Picker
往MFC界面上拖一个Date Time Picker控件,然后选中,右键添加一个变量比如 m_dtCtrl 1.获得该控件的时间 CTime m_date; //别看名字以为它只有时间,实际上它可以 ...
《Flutter 控件大全》第五十五个：InkWell和Ink
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit). 同时也欢迎关注我的Flutter公众号[老孟程序员],公众号首发Flutter的相关内容. ...
《Flutter 控件大全》第五十二个：Hero
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit). 同时也欢迎关注我的Flutter公众号[老孟程序员],公众号首发Flutter的相关内容. ...
EXTJS 6 - 日期控件 Date picker 只选年月
官方没有支持,只能自己写一下了. Ext.define('Ext.form.field.Month', {extend: 'Ext.form.field.Date',alias: 'widget.mo ...

Flutter - 控件之 Picker

Flutter - 控件之 Picker

CupertinoPicker

应用示例：选择性别

Flutter - 控件之 Picker相关推荐

最新文章

热门文章