美文网首页
【Flutter】表单 - Datapick,Timepick

【Flutter】表单 - Datapick,Timepick

作者: diva_dance | 来源:发表于2019-03-26 20:27 被阅读0次

    DatePick 和 Timepick 在 Flutter 里面没有对应的控件。只是提供两个函数:showDatePicker 和 showTimePicker

    DatePick

    打开日期选择器

    RaisedButton(
        child: Text(_date != null ? _date : '点击'),
        onPressed: () {
            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)),      
            );
            setState(() {
              _date = picker.toString();
            });
        },
    )
    

    showDatePicker 接收参数有

    • context BuildContext 上下文
    • initialDate 初始日期
    • firstDate 开始日期
    • lastDate 结束日期。以上都是必填项
    • locale 国际化。下面详解。
    • textDirection 文本方向。

    ltr


    image

    rtl


    image
    • initialDatePickerMode 默认是 DatePickerMode.day, 可以设置 DatePickerMode.year。

    1 设置国际化
    在 pubspec.yaml 中设置

    flutter_localizations:
        sdk: flutter
    

    接着运行 flutter packages get 获取依赖库。

    在对应 dart 文件中加入

    import 'package:flutter_localizations/flutter_localizations.dart';

    然后在 MaterialApp 的构造方法中赋值

    localizationsDelegates: [                            
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
    ],
    supportedLocales: [                                
        const Locale('zh','CH'),
        const Locale('en','US'),
    ],
    

    再给 showDatePicker 的 local 设置成中文。

    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)),
      locale: Locale('zh')
    );
    setState(() {
      _date = picker.toString();
    });
    
    image

    关于国际化参考: https://www.jianshu.com/p/8356a3bc8f6c

    Timepick

    设置时间选择器

    void _showTimePick() async {
        var picker = await showTimePicker(
            context: context,
            initialTime: new TimeOfDay(hour: 2, minute: 2)
        );
        setState(() {
            _date = picker.toString();
        });
    }
    
    image

    参数

    • context 上下文
    • initialTime 初始化时间 new TimeOfDay(hour: 2, minute: 2)

    相关文章

      网友评论

          本文标题:【Flutter】表单 - Datapick,Timepick

          本文链接:https://www.haomeiwen.com/subject/vlbivqtx.html