Flutter第十五章（showDatePicker，showTimePicker，国际化适配，DateTime 时间格式转换）

版权声明：本文为作者原创书籍。转载请注明作者和出处，未经授权，严禁私自转载，侵权必究！！！

`情感语录: 一眼就能看得到头，不是我们想要的生活，我们为之努力，不是为了飞黄腾达，睥睨群雄，而是努力让自己的生活多一种可能，给自己的未来多一份惊喜`

欢迎来到本章节，上一章节介绍了Flutter 中的 弹窗使用，知识点回顾戳这里 Flutter基础第十四章

本章主要介绍开发中的时间选择器，时间格式转换，国际化适配等。

本章简要：

1、showDatePicker、showTimePicker方法

2、国际化适配

3、DateTime 时间格式转换

一、showDatePicker、showTimePicker 方法

showDatePicker、showTimePicker 这个两个分别表示弹出 年月日和 时间 选择器的方法，这和见面介绍的 showDialog 类似，内部的样式我们无法直接修改，它是跟随系统的版本所决定。

1、showDatePicker

它是一个异步方法，如下：

    Future<DateTime> showDatePicker({
      @required BuildContext context,
      @required DateTime initialDate,
      @required DateTime firstDate,
      @required DateTime lastDate,
      SelectableDayPredicate selectableDayPredicate,
      DatePickerMode initialDatePickerMode = DatePickerMode.day,
      Locale locale,
      TextDirection textDirection,
      TransitionBuilder builder,
    })

常用属性：

    属性                      描述

    context                   上下文

    initialDate               初始化的日期(必传)

    firstDate                 起始日期(必传)

    lastDate                  结束日期(必传)

    initialDatePickerMode     year和day两种模式，year 表示弹出时默认只显示年份，day表示年月日

    Locale locale             语言配置
    
    textDirection             选择器上的文字从左还是从右开始排版（一般不用）

首先来看弹出一个年月日的时间选择器，实例代码如下：

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    class TimePickerPage extends StatefulWidget {
      TimePickerPage({Key key}) : super(key: key);
    
      _TimePickerPageState createState() => _TimePickerPageState();
    }
    
    class _TimePickerPageState extends State<TimePickerPage> {
      // 获取当前日期
      DateTime _nowDate = DateTime.now();
    
      _showDatePicker() {
        showDatePicker(
                //上下文
                context: context,
                //初始化日期
                initialDate: _nowDate,
                //起始日期 1999 年
                firstDate: DateTime(1999),
                //结束日期 2100
                lastDate: DateTime(2100)
             ).then((value) {
              if (value == null) {
                return;
              }
              setState(() {
                this._nowDate = value;
              });
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text("TimePickerPage"),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      InkWell(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            
                            Text("${_nowDate.year} 年 ${_nowDate.month} 月 ${_nowDate.day} 日"),
                            Icon(Icons.arrow_drop_down)
                          ],
                        ),
                        onTap: _showDatePicker,
                      ),
                    ],
                  )
                ],
              ),
            ));
      }
    }

效果如下：

showDatePicker.gif

2、showTimePicker

它也是一个异步方法，如下：

    Future<TimeOfDay> showTimePicker({
      @required BuildContext context,
      @required TimeOfDay initialTime,
      TransitionBuilder builder,
    })

常用属性;

    属性                      描述

    context                   上下文

    initialTime               初始化时间

实例代码：

  //设置一个指定时间
  var _nowTime = TimeOfDay(hour: 16, minute: 45);

  _showTimePicker() {
    showTimePicker(
        context: context,
        //初始化时间到指定的时间
        initialTime: _nowTime
    ).then((value) {
      if (value == null) {
        return;
      }
      setState(() {
        this._nowTime = value;
      });
    });
  }

效果如下：

showTimePicker.gif

二、国际化适配

可以看到上面的时间选择器都是英文的，这对于中国人来说很不符合使用习惯，因此需要做国际化适配。Flutter 只提供美式英语的本地化。如果想要添加其他语言，应用必须指定额外的 MaterialApp 属性并且添加一个单独的 package，叫做 flutter_localizations。截至到 2019 年 4 月份，这个 package 已经支持大约 52 种语言。

1、pubspec.yaml 加入库依赖

    dependencies:
    
      ..... 剩略其他库....

      #国际化适配
      flutter_localizations:
        sdk: flutter

2、导包

 import 'package:flutter_localizations/flutter_localizations.dart';

3、在 MaterialApp 中配置国际化

class MyApp extends StatelessWidget {

    @override
    Widget build(BuildContext context) {

      return MaterialApp(

          //国际化配置
          localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          supportedLocales: [
            //配置语种
            const Locale('zh', 'CH'),
            const Locale('en', 'US'),
          ],

          //去掉debug图标
          debugShowCheckedModeBanner:false ,

          //初始化的时候加载的路由
          initialRoute: '/',
          onGenerateRoute: onGenerateRoute

      );
    }
  }

再次打开我们的时间选择器，验证国际化适配。效果如下：

语言配置后效果.gif

三、DateTime 时间格式转换

开发中对各种样式的时间格式处理都需要用到 DateTime 类，它的默认构造函数就可以构造一个指定的时间，如：
new DateTime(xxxx年, xx月, xx日, xx时, xx分,xx秒,...) 支持到微妙，该类功能相当的强大。

默认构造函数

  DateTime(int year,
      [int month = 1,
      int day = 1,
      int hour = 0,
      int minute = 0,
      int second = 0,
      int millisecond = 0,
      int microsecond = 0])
      : this._internal(year, month, day, hour, minute, second, millisecond,
            microsecond, false);

世界标准时间（UTC）命名构造函数

  DateTime.utc(int year,
      [int month = 1,
      int day = 1,
      int hour = 0,
      int minute = 0,
      int second = 0,
      int millisecond = 0,
      int microsecond = 0])
      : this._internal(year, month, day, hour, minute, second, millisecond,
            microsecond, true);

常用方法和属性

    方法名称                       描述

    now()                          命名构造，获取当前时间

    millisecondsSinceEpoch         获取 DateTime 中的时间 精确到毫秒 

    fromMillisecondsSinceEpoch     DateTime 转时间戳

    parse(timeString)              字符串转DateTime

    isBefore(date)                 时间比较---在之前

    isAfter(date)                  时间比较---在之后

    isAtSameMomentAs(date)         时间比较---相等

    compareTo(date)                时间比较---大于返回1；等于返回0；小于返回-1

    add(Duration)                  时间增加

    subtract(Duration)             时间减少

    difference(date)               时间差计算

    timeZoneName                   本地时区简码

    timeZoneOffset                 返回UTC与本地时差

    year、month、day、             年、月、日、时、分、秒、毫秒、微妙
    hour、minute、second、
    millisecond、microsecond
      
    weekday                        星期几