Flutter UI - 选择器 Widget

2,685 阅读2分钟

  • TimePicker - 时间选择器
  • Datapick - 日期选择器
  • image_picker - 图片选择器

TimePicker

TimePicker 示例:上面可以切换上下午,小时和分钟需要分别点击选择

TimePicker 不是 widget,而是由 showTimePicker 方法创建,showTimePicker 方法蛋疼的是会返回一个 Future<TimeOfDay> 类型的异步任务,看见 Future 就知道任务会添加到消息队列中去执行。这是这类由方法其中的 widget 的通病了,我猜测是因为这类 widget 都是附着在 root 根视图层上直接显示的,需要的夸页面进行通知,所以就使用消息队列了

但是 TimePicker 有个非常蛋疼的问题,就是没有按钮回调,而是在用户点击确定后使用 futrue 返回数据的方式,这就需要我们使用 Future.then 的方式拿到数据了,点击取消是返回的是 null,需要我们判空

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('点击'),
      onPressed: () {
        Future<TimeOfDay> timePicker = getTimePicker(context);
        timePicker.then((time) {
          if(time != null)  print("time2:${time.hour}:${time.minute}");
        });
      },
    );
  }

  getTimePicker(BuildContext context) {
    return showTimePicker(
        context: context, initialTime: TimeOfDay(hour: 12, minute: 30));
  }

返回的时间数据类型是:TimeOfDay,其中 .hour 是24小时制的


Datapick

Datapick 一样也是没有 widget 存在,由系统系统方法启动 showDatePicker()

  • context - 上下文
  • initialDate - 初始日期
  • firstDate - 开始日期
  • lastDate - 结束日期。以上都是必填项
  • locale - 国际化
  • textDirection - 文本方向
var picker = await showDatePicker(
  context: context,
  initialDate: new DateTime.now(),
  firstDate: new DateTime.now().subtract(new Duration(days: 30)), 
  lastDate: new DateTime.now().add(new Duration(days: 30)),      
);

image_picker

image_picker 是 Flutter 官方提供的库,使用起来非常简单,一行代码即可,可以选择图库或是拍照,缺点是拍照和图库不再一起,需要分别吊起来

就是这一行方法就行

File image = await ImagePicker.pickImage(source: ImageSource.gallery);
  • ImageSource.gallery - 调起图库选择图片
  • ImageSource.camera -调起相机

不过一起只能选择一张图片,选择图片的结果是一个 File 文件

拍照就不举例了,图库里面还是很丰富的,从最近的照片到系统图库,文档管理器都可以调出来,gif 不让上传,没办法啦...

这里又一个 image_picker 结合 Dio 做图片上传的例子:

image_picker 需要做的除了上面那一行,就是导入了:

  image_picker: ^0.5.0+9