flutter 选择器库,包括日期及时间选择器(可设置范围)、单项选择器(可用于性别、民族、学历、星座、年龄、身高、体重、温度等)、城市地址选择器(分省级、地级及县级)、多项选择器等…… 欢迎Fork & pr贡献您的代码,大家共同学习
Web版在线Demo flutter.eeaarr.cn (上面进不去 试试这个)
1.Depend
dependencies:
flutter_pickers: ^2.1.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<String> cityCode = Address.getCityCodeByName(townName: '四川省', cityName: '成都市', provinceName: '武侯区');
return [510000,510100,510104] or [510000,510000] or [510000] or []
/// 通过城市code 查询城市名(有先后顺序)
List<String> cityName = Address.getCityNameByCode(provinceCode: "510000", cityCode: "510100", townCode: "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.showMultiPicker() 请戳我查看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.showMultiPicker(
context,
data: timeData,
selectData: timeData2Select,
suffix: ['', '时', '分', '秒'],
onConfirm: (p) {
print('longer >>> 返回数据类型:${p.map((x) => x.runtimeType).toList()}');
},
);
}
参数 | 描述 | 默认 |
---|---|---|
data | 数据源 | null |
selectData | 选中的数据 | '' |
suffix | item后缀 | null |
pickerStyle | 详见样式 | DefaultPickerStyle() |
onChanged | 选择器发生变动 return (List data) | null |
onConfirm | 选择器提交 return (List data) | null |
Pickers.showMultiLinkPicker() 请戳我查看demo代码
void _showPicker() {
var multiData = {
'a': {
'aa': [1, 'ww'],
'aaa': 10086
},
'b': ['bbb', 'bbbbb'],
'c': {
'cc': {
'ccc333': [111, 1111],
'cccc33': {
'ccccc4': '帮忙star',
'ccc4-2': [4442, 44442, 442]
},
},
'cc2': ['ccc', 123],
'cc3': 'star 鼓励'
}
};
Pickers.showMultiLinkPicker(
context,
data: multiData,
// 注意数据类型要对应 比如 44442 写成字符串类型'44442',则找不到
// selectData: ['c', 'cc', 'cccc33', 'ccc4-2', 44442],
selectData: ['c', 'cc3'],
columeNum: 5,
suffix: ['', '', '', '', ''],
onConfirm: (List p) {
print('longer >>> 返回数据:${p.join('、')}');
print('longer >>> 返回数据类型:${p.map((x) => x.runtimeType).toList()}');
},
);
}
参数 | 描述 | 默认 |
---|---|---|
columeNum | 选择器列数(必填) | null |
data | 数据源 | null |
- 和上面的多项选择器(无联动)差不多,就不多介绍,改动了2个字段
- 最外层必须是map(既然是多项,你至少得2列吧)
- map类型 说明还有下一列,如果是list或者string、num 表示已经达到最后一级
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 |
selectData | PDuration()初始化选中时间 | 默认现在:PDuration.now() |
minDate | PDuration()最小时间 | PDuration(year: 1900) |
maxDate | PDuration()最大时间 | 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
}
- 如果用到了日期,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: 确定按钮颜色
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 {}
flutter_pickers 使用 MIT 许可证,详情见 LICENSE 文件。