flutter_pickers

github：https://github.com/longer96/flutter_pickers

欢迎Fork & pr贡献您的代码，大家共同学习

Example

Web版在线Demo

gif1.gif

gif1.gif

gif2.gif

gif2.gif

gif3.gif

gif3.gif

gif4.gif

gif4.gif

用法

1.Depend

dependencies: 
    flutter_pickers: ^1.0.0

2.Get

$ flutter packages get

3.Install

import 'package:flutter_pickers/pickers.dart';

目录

地址选择器

Pickers.showAddressPicker()

  • 支持三级联动
  • 支持自定义颜色、大小等样式
  • 支持显示 '全部' 选项
  • 支持只选择 省市 2级
  • 支持查询城市码
  • 实时回调
pic1.png

pic1.png

pic2.png

pic2.png

三级选择器动图二级静态图

简单使用

String initProvince = '四川省', initCity = '成都市', initTown = '双流区';
Widget _checkLocation() {
return InkWell(
    onTap: () {
      Pickers.showAddressPicker(
        context,
        initProvince: initProvince,
        initCity: initCity,
        initTown: initTown,
        onConfirm: (p, c, t) {
          setState(() {
            initProvince = p;
            initCity = c;
            initTown = t;
          });
        },
      );
    },
    child: Text('$initProvince - $initCity - $initTown'));
}
  • initTown : 不设置或者设置为null ，不显示区级

更多用法

demo address_picker_page.dart

AddressPicker.showPicker(
  context,
  initProvince: locations2[0],
  initCity: locations2[1],
  initTown: locations2[2],
  showTitlebar: true,
  menu: _headMenuView,
  menuHeight: 36.0,
  title: title,
  cancelWidget: _cancelButton,
  commitWidget: _commitButton,
  headDecoration: headDecoration,
  addAllItem: false,
  textColor: Colors.white,
  backgroundColor: Colors.grey[800],
  onConfirm: (p, c, t) {},
);

pic3.png

pic3.png

参数描述默认
initProvince初始化 省''
initCity初始化 市''
initTown初始化 区''
pickerStyle详见样式DefaultPickerStyle()
onChanged选择器发生变动 return (String province, String city, String town)null
onConfirm选择器提交 return (String province, String city, String town)null
addAllItem市、区是否添加 '全部' 选项true

更多方法

/// 根据城市名 查询城市code(有先后顺序)
List<String> cityCode =  Locations.getTownsCityCode("四川省","成都市","锦江区");
return [510000,510100,510104]  or  [510000,510000]  or [510000]  or  []


/// 通过城市code 查询城市名(有先后顺序)
List<String> cityName =  Locations.getCityNameByCode("510000","510100","510104");
return [四川省, 成都市, 锦江区]  or  [四川省, 成都市]  or [四川省] or []

单项选择器

Pickers.showSinglePicker()请戳我查看demo代码

  • 单选和多选支持数据源混传 num string

简单使用.

String initData = 'PHP';
Widget _demo() {
    return InkWell(
    onTap: () {
      Pickers.showSinglePicker(context,
          data: ['PHP', 'JAVA', 'C++', 'Dart', 'Python', 'Go'],
          selectData: initData,
          onConfirm: (p) {
            setState(() {
              initData = p;
            });
          }, onChanged: (p) => print('数据发生改变：$p'));
    },
    child: Text('$initData'));
}
参数描述默认
data数据源null
selectData选中的数据''
pickerStyle详见样式DefaultPickerStyle()
onChanged选择器发生变动 return (String data)null
onConfirm选择器提交 return (String data)null

内置数据

可直接传给 data:PickerDataType.sex

  • sex // 性别
  • education // 学历
  • subject // 学科
  • constellation // 星座
  • zodiac // 生肖
  • ethnicity // 民族

多项选择器

Pickers.showMultiplePicker() 请戳我查看demo代码

示例代码

  final timeData = [
    ['上午', '下午'],
    List.generate(12, (index) => (index + 1).toString()).toList(),
    List.generate(60, (index) => index.toString()).toList(),
    List.generate(60, (index) => index.toString()).toList(),
  ];

  void _showDemo(){
    Pickers.showMultiplePicker(
      context,
      data: timeData,
      selectData: timeData2Select,
      suffix: ['', '时', '分', '秒'],
      onConfirm: (p) {
        print('longer >>> 返回数据类型：${p.map((x) => x.runtimeType).toList()}');
      },
    );
  }
参数描述默认
data数据源null
selectData选中的数据''
suffixitem后缀null
pickerStyle详见样式DefaultPickerStyle()
onChanged选择器发生变动 return (List data)null
onConfirm选择器提交 return (List data)null

时间选择器

Pickers.showDatePicker() 请戳我查看demo代码

  • 16种模式「年月日时分秒」
  • 自定义后缀
  • 最大|最小 时间
  • 自定义显示样式
pic9.png

pic9.png

pic10.png

pic10.png

pic11.png

pic11.png

pic12.png

pic12.png

pic13.png

pic13.png

pic14.png

pic14.png

简单使用..

Widget demo() {
    return FlatButton(
    onPressed: () {
      Pickers.showDatePicker(
        context,
        onConfirm: (p) {
          print('longer >>> 返回数据：$p');
        },
        // onChanged: (p) => print(p),
      );
    },
    child: Text('Demo'));
}

更多方法.

    Pickers.showDatePicker(
      context,
      // 模式，详见下方
      mode: DateMode.HMS,
      // 后缀 默认Suffix.normal()，为空的话Suffix()
      suffix: Suffix(hours: ' 小时', minutes: ' 分钟', seconds: ' 秒'),
      // 样式  详见下方样式
      pickerStyle: pickerStyle,
      // 默认选中
      selectDate: PDuration(hour: 18, minute: 36, second: 36),
      minDate: PDuration(hour: 12, minute: 38, second: 3),
      maxDate: PDuration(hour: 12, minute: 40, second: 36),
      onConfirm: (p) {
        print('longer >>> 返回数据：$p');
      },
      // onChanged: (p) => print(p),
    );
参数描述默认
mode时间选择器所显示样式 16 种时间样式DateMode.YMD
selectDataPDuration()初始化选中时间默认现在：PDuration.now()
minDatePDuration()最小时间PDuration(year: 1900)
maxDatePDuration()最大时间PDuration(year: 2100)
suffix每列时间对应的单位Suffix.normal()
pickerStyle详见样式DefaultPickerStyle()
onChanged选择器发生变动 return (PDuration data)null
onConfirm选择器提交 return (PDuration data)null

参数说明

  • PDuration()

selectDate，minDate，maxDate 和返回的数据类型 都是PDuration()

    // 可以自定义设置年月日时分秒
    PDuration(year: 2020, month: 1, day: 4, hour: 12, minute: 40, second: 36);
    // 设置DateTime类型
    PDuration.parse(DateTime.parse('20210139'));
    PDuration.now();
  • DateMode
    时间选择器所显示样式
  /// 时间选择器 所显示样式
  enum DateMode {
    /// 【yyyy-MM-dd HH:mm:ss】年月日时分秒
    YMDHMS,
    /// 【yyyy-MM-dd HH:mm】年月日时分
    YMDHM,  
    /// 【yyyy-MM-dd HH】年月日时
    YMDH,  
    /// 【yyyy-MM-dd】年月日
    YMD,  
    /// 【yyyy-MM】年月
    YM,  
    /// 【yyyy】年
    Y,  
    /// 【MM-dd HH:mm:ss】月日时分秒
    MDHMS,  
    /// 【MM-dd HH:mm】月日时分
    MDHM,  
    /// 【MM-dd HH:mm】月日时
    MDH,  
    /// 【MM-dd】月日
    MD,  
    /// 【HH:mm:ss】时分秒
    HMS,  
    /// 【HH:mm】时分
    HM,  
    /// 【mm:ss】分秒
    MS,  
    /// 【ss】秒
    S,  
    /// 【MM】月
    M,  
    /// 【HH】时
    H
  }

tip

  • 如果用到了日期，selectData需要传入年，不然无法计算，如果没有，会默认当前年
  • 当只有单列数据，min|max限制不产生关联 只针对单列item限制，比如 maxDate: day=3, minDate: day=10, 那么day只显示3-10之间
  • 如果minDate:year: 2020, month: 2, day: 10, 只显示2020年2月10日之后的
  • minDate|maxDate 的YMD和HMS 没有关联！ 没有关联！比如设置maxDate:year: 2020, month: 2, day: 10, hour:8，不是2020年2月10日8时之后的时间

样式

内置样式

style_picker_page.dart 请戳我查看demo代码
default_style.dart 源码

  • 以下4种样式是使用 PickerStyle 类进行封装的。
  • 都内置了夜间模式，如 NoTitleStyle.dark()
  • 除了NoTitleStyle, 其它的样式可以传入
    • haveRadius： 是否圆角
    • title： 标题
    • color： 确定按钮颜色
s1-1.png

s1-1.png

s1-2.png

s1-2.png

默认样式：DefaultPickerStyle()默认样式(暗色)：DefaultPickerStyle.dark()
  
s2-1.png

s2-1.png

s2-2.png

s2-2.png

无标题样式：NoTitleStyle()无标题样式(暗色)：NoTitleStyle.dark()
  
s3-1.png

s3-1.png

s3-2.png

s3-2.png

关闭按钮样式：ClosePickerStyle()关闭按钮样式(暗色)：ClosePickerStyle.dark()
  
s4-1.png

s4-1.png

s4-2.png

s4-2.png

圆角按钮样式：RaisedPickerStyle()圆角按钮样式(暗色)：RaisedPickerStyle.dark()

自定义样式

style_picker_page.dart 请戳我查看demo代码
picker_style.dart 样式基类

style_mark.png

style_mark.png

/// [showTitleBar] 是否显示头部（选择器以上的控件） 默认：true
/// [menu] 头部和选择器之间的菜单widget，默认null 不显示
/// [title] 头部 中间的标题  默认SizedBox() 不显示
/// [pickerHeight] 选择器下面 picker 的整体高度  固定高度：220.0
/// [pickerTitleHeight]  选择器上面 title 确认、取消的整体高度  固定高度：44.0
/// [pickerItemHeight]  选择器每个被选中item的高度：40.0
/// [menuHeight]  头部和选择器之间的菜单高度  固定高度：36.0
/// [cancelButton]  头部的取消按钮
/// [commitButton]  头部的确认按钮
/// [textColor]  选择器的文字颜色 默认黑色
/// [backgroundColor]  选择器的背景颜色 默认白色
/// [headDecoration] 头部Container 的Decoration   默认：BoxDecoration(color: Colors.white)

class PickerStyle {}
# flutter
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟