Flutter中日期组件DatePicker及组件汉化

Stella981
• 阅读 737

Flutter提供了DatePicker组件进行时间选择。

日期组件及时间组件代码示例:

import 'package:flutter/material.dart';
// 第三方插件,需要提前配置
import 'package:date_format/date_format.dart';

class DatePickerPage extends StatefulWidget {
    DatePickerPage({Key key}) : super(key: key);
    
    @override
    _DatePickerPageState createState() => _DatePickerPageState();
}

class _DatePickerPageState extends State<DatePickerPage> {

    // 初始化当前日期
    DateTime _nowDate = DateTime.now();
    // 初始化当前时间
    TimeOfDay  _nowTime = TimeOfDay(hour: 12, minute: 30);

    @override
    void initState() {
        super.initState();
    }

    // 日期组件方法,异步调用(第一种调用方式)
    // _showDatePicker(){
    //     showDatePicker(
    //         context: context, 
    //         initialDate: _nowDate, 
    //         firstDate: DateTime(1980), 
    //         lastDate: DateTime(2100)
    //     ).then((result){
    //         // 异步回调的结果
    //         print(result);
    //     });
    // }

    // 日期组件方法,异步调用(第二种调用方式)
    void _showDatePicker() async{
        var result = await showDatePicker(
            // 上下文环境
            context:context, 
            // 初始化时间
            initialDate:_nowDate, 
            // 最早时间
            firstDate:DateTime(1980), 
            // 最晚时间
            lastDate:DateTime(2100), 
        );
        // 异步回调的结果
        print(result);
        // 将选择的时间进行赋值
        setState(() {
           this._nowDate = result;
        });
    }

    // 时间选择器,异步调用
    void _showTimePicker() async{
        var result = await showTimePicker(
            // 上下文环境
            context: context, 
            // 初始化时间
            initialTime: _nowTime
        );
        setState(() {
           this._nowTime = result;
        });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("DatePicker")),
            body:Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            // 日期选择器
                            InkWell( // 点击有水波纹效果
                                child:Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget>[
                                        // 用第三方插件将选择的日期进行格式化
                                        Text("${formatDate(_nowDate,[yyyy,'年',mm,'月',dd])}"),
                                        Icon(Icons.arrow_drop_down)
                                    ],
                                ),
                                onTap:this._showDatePicker
                            ),

                            // 时间选择器
                            InkWell( // 点击有水波纹效果
                                child:Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children:<Widget>[
                                        // 将选择的时间进行格式化
                                        Text("${_nowTime.format(context)}"),
                                        Icon(Icons.arrow_drop_down)
                                    ],
                                ),
                                onTap:this._showTimePicker
                            )
                        ],
                    )
                ],
            )
        );
    }
}

效果图如下:

Flutter中日期组件DatePicker及组件汉化  

默认情况下,组件是英文格式的,如果要想将组件进行汉化,需要做以下操作:

1. 安装本地化的包。

dependencies:
  flutter:
    sdk: flutter
  date_format: ^1.0.6
  flutter_localizations:
    sdk: flutter

pubspec.yaml中配置保存后,在VS Code环境中会自动下载依赖包。

如果无法正常下载,执行 flutter pub get 。

2. 引入本地化文件包

// main.dart

// 引入本地化的包
import 'package:flutter_localizations/flutter_localizations.dart';

3. 进行配置

// main.dart

Widget build(BuildContext context) {
    return MaterialApp(
        
        // 配置本地化
        localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: [
            const Locale('zh', 'CH'),
            const Locale('en', 'US'),
        ],
        locale: const Locale("zh"),

    );
}

4. 完整示例

// main.dart
import 'package:flutter/material.dart';

// 引入本地化的包
import 'package:flutter_localizations/flutter_localizations.dart';

// 引入路由管理
import 'routes/Routes.dart';

// 主函数
void main(){
    runApp(MyApp());
}

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'),
            ],
            locale: const Locale("zh"),

            // 初始化的路由
            initialRoute: '/',
            // 监听路由事件
            onGenerateRoute:onGenerateRoute,
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
            // 关闭调试模式的图标
            debugShowCheckedModeBanner: false,

            
        );
    }
}
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
浩浩 浩浩
3年前
【Flutter实战】图片和Icon
3.5图片及ICON3.5.1图片Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvi
Stella981 Stella981
2年前
Flutter学习之重叠布局
1.两个元素的重叠布局可以使用stack组件import'package:flutter/material.dart';voidmain(){runApp(MyApp());}classMyAppextendsStatelessWidget{
Stella981 Stella981
2年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Wesley13 Wesley13
2年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Stella981 Stella981
2年前
34 Flutter仿京东商城项目 用户注册 注册流程 POST发送验证码 倒计时功能 验证验证码
加群_452892873_下载对应34课文件,运行方法,建好项目,直接替换lib目录以下列出的是本课涉及的文件。RegisterFirst.dartimport'package:flutter/material.dart';import'package:flutter_jdshop/services/ScreenA
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这