flutter_pickers

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

Example

用法

1.Depend

dependencies:

flutter_pickers: ^1.0.0

复制代码

2.Get

$flutter packages get

复制代码

3.Install

import 'package:flutter_pickers/pickers.dart';

复制代码

目录

地址选择器

Pickers.showAddressPicker()

支持三级联动

支持自定义颜色、大小等样式

支持显示 '全部' 选项

支持只选择 省市 2级

支持查询城市码

实时回调

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

简单使用

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 ，不显示区级

更多用法

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) {},

);

复制代码

参数描述默认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 cityCode = Locations.getTownsCityCode("四川省","成都市","锦江区");

return [510000,510100,510104] or [510000,510000] or [510000] or []

/// 通过城市code 查询城市名(有先后顺序)

List 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种模式「年月日时分秒」

自定义后缀

最大|最小 时间

自定义显示样式

简单使用..

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时之后的时间

样式

内置样式

以下4种样式是使用 PickerStyle 类进行封装的。

都内置了夜间模式，如 NoTitleStyle.dark()

除了NoTitleStyle, 其它的样式可以传入

haveRadius： 是否圆角

title： 标题

color： 确定按钮颜色

默认样式：DefaultPickerStyle()默认样式(暗色)：DefaultPickerStyle.dark()

无标题样式：NoTitleStyle()无标题样式(暗色)：NoTitleStyle.dark()

关闭按钮样式：ClosePickerStyle()关闭按钮样式(暗色)：ClosePickerStyle.dark()

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

自定义样式

style_picker_page.dart 请戳我查看demo代码

picker_style.dart 样式基类

/// [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{}

复制代码

License

flutter_pickers 使用 MIT 许可证，详情见 LICENSE 文件。