Flutter 组件之官方日期组件时间戳转换、第三方组件应用

逃离我推掉我的手 2023-05-28 09:59 53阅读 0赞

#### 时间戳转换 ####

获取日期

> `var now = new DateTime();`  
> `var now = DateTime.now();`//当前日期

转换成时间戳,单位毫秒。 13位时间戳

> `now.millisecondsSinceEpoch;`

时间戳转化成日期

> `DateTime.fromMillisecondsSinceEpoch(1585140111111)`

2020-03-25 20:41:51 转换成年月日格式  
在`pubspec.yaml` 配置文件内配置第三方依赖[网站][Link 1]

dependencies:
      flutter:
        sdk: flutter
    
      # The following adds the Cupertino Icons font to your application.
      # Use with the CupertinoIcons class for iOS style icons.
      cupertino_icons: ^0.1.2
      date_format: ^1.0.8

如果不自动下载, 手动在项目目录下执行命令

flutter packages get

如果看到finished 没有报错那就成功了。  
可以直接按照文档的使用方式使用插件

import 'package:flutter/material.dart';
    import 'package:date_format/date_format.dart';//引入插件
    var now = new DateTime();
    print(formatDate(now, [yyyy, '年', mm, '月', dd,'日']));

##### showDatePicker #####

> 默认是英文

DateTime _nowTime = DateTime.now();
     //第一种方式 then
      _ShowDatePinker(){ 
        showDatePicker(//future组件方法 类似于Promise
            context: context,//上下文
            initialDate: _nowTime,//当前日期
            firstDate: DateTime(1980), //起始时间
            lastDate: DateTime(2100)//结束时间
        ).then((res)=>{ //异步回调
          print(res)//输出时间 2020-03-18 00:00:00.000
        });
      }
    //第二种方式 aysnc
    _ShowDatePinker() async{ 
      var result =  await showDatePicker(
          context: context,
          initialDate: _nowTime,
          firstDate: DateTime(1980),
          lastDate: DateTime(2100)
      );
      print(result);
    }
    
    
    Container(//页面组件
      child: InkWell(//水波纹可以点击的组件,类似于Button
         child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
            		 Text("${formatDate(this._nowTime, [yyyy, '年', mm, '月', dd,'日'])}"),
                      Icon(Icons.arrow_drop_down)
           ],
         ),
         onTap: _ShowDatePinker,//点击弹出时间插件
       ),
     ),

##### 日期时间组件数据选中回显 #####

DateTime _nowTime = DateTime.now();//初始化日期
      var cTime = TimeOfDay(hour: 12, minute: 00);//初始化时间
      _ShowDatePinker() async{ 
        var result =  await showDatePicker(
            context: context,
            initialDate: _nowTime,
            firstDate: DateTime(1980),
            lastDate: DateTime(2100)
        );
        print(result);
        setState(() { //设置
          this._nowTime=result;
        });
      }
    
      _ShowTimePinker() async{ 
        var result = await showTimePicker(
            context: context,
            initialTime: cTime
        );
        setState(() { 
          this.cTime=result;
        });
      }
    //数据回显
    InkWell(//水波纹可以点击的组件,类似于Button
     child: Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         Text("${formatDate(this._nowTime, [yyyy, '年', mm, '月', dd,'日'])}"),//第三方格式化样式
         Icon(Icons.arrow_drop_down)
       ],
     ),
     onTap: _ShowDatePinker,
    ),InkWell(//水波纹可以点击的组件,类似于Button
     child: Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         Text("${this.cTime.format(context)}"),//format(context)默认格式化样式
         Icon(Icons.arrow_drop_down)
       ],
     ),
     onTap: _ShowTimePinker,
    ),

##### flutter showDatePicker showTimePicker显示中文日期 #####

1、配置flutter\_localizations依赖  
找到`pubspec.yaml`配置`flutter_localizations`

dependencies:
      flutter:
        sdk: flutter
      flutter_localizations:
        sdk: flutter

2、导入国际化的包 flutter\_localizations  
`import 'package:flutter_localizations/flutter_localizations.dart';`  
3、设置国际化

void main() { 
      runApp(
        new MaterialApp(
          title: 'app',
          theme: new ThemeData(
            primaryColor: Colors.white,
          ),
          home: new MyLoginWidget(),
          localizationsDelegates: [
            //此处
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          supportedLocales: [
            //此处
            const Locale('zh', 'CH'),
            const Locale('en', 'US'),
          ],
        ),
      );
    }

4、要显示中文的控件设置：

_showDatePicker() async{ 
        var date =await showDatePicker(
          context: context,
          initialDate: _datetime,
          firstDate:DateTime(1900),
          lastDate:DateTime(2050),
          locale: Locale('zh'),    
        );
        if(date==null) return;
        print(date);
        setState(() { 
           _datetime=date;
        });
      }

##### 第三方picker组件 #####

> `flutter_cupertino_date_picker: ^1.0.2`

//先导入组件库
    import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
    
    //定义时间变量
     DateTime oTime = DateTime.now();
    
    
    //定义组件
      _ShowDateOtherPinker() { 
        DatePicker.showDatePicker(
            context,//上下文
            pickerTheme: DateTimePickerTheme(//定义主题
              showTitle:true ,//是否显示标题
              confirm: Text("确认",style: TextStyle(color: Colors.orange),),//确认按钮
              cancel: Text("取消",style: TextStyle(color: Colors.red),)//取消按钮
            ),
            minDateTime: DateTime.parse("1900-00-00"),//最小时间
            maxDateTime: DateTime.parse("2100-00-00"),//最大时间
            initialDateTime: oTime,//初始化时间
            dateFormat: "yyyy-MM-dd",//格式化时间样式
            locale: DateTimePickerLocale.zh_cn,//选择语言
            onCancel: (){ //取消按钮回调
             print("quxiao");
            },
    // onChange: (dateTime,List<int> index){ 
    // setState(() { 
    // this.oTime=dateTime;
    // });
    // },
          onConfirm: (dateTime,List<int> index){ //确认按钮回调
              setState(() { //设置时间
                this.oTime=dateTime;
              });
          }
        );
      }
    
    
    InkWell(//水波纹可以点击的组件,类似于Button
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("${oTime}"),
          Icon(Icons.arrow_drop_down)
        ],
      ),
      onTap: _ShowDateOtherPinker,
    ),

[Link 1]: https://pub.dev