Futter基础第19篇: 实现调用第三方时间选择器、日期选择器、时间戳

效果图:

Futter基础第19篇: 实现调用第三方时间选择器、日期选择器、时间戳_第1张图片

如果会遇到英文问题,请参考:
Flutter实现调用原生时间选择器、日期选择器、时间戳、Future异步

我在此篇博文已对解决方法进行了详细讲解

那么下面我们就开始这一章相关的知识

参考第三方库:

https://pub.dev/packages/flutter_cupertino_date_picker

配置:pubspec.yaml
Futter基础第19篇: 实现调用第三方时间选择器、日期选择器、时间戳_第2张图片

在相关类引入包名:
import ‘package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart’;

DatePickerPub.dart

import 'package:flutter/material.dart';

import 'package:date_format/date_format.dart';

import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';    //第三方时间组件库

class DatePickerPubPage extends StatefulWidget {
  @override
  _DatePickerPubPageState createState() => _DatePickerPubPageState();
}

class _DatePickerPubPageState extends State<DatePickerPubPage> {

  DateTime _dateTime = DateTime.now();  //获取当前日期

  _showDatePicker(){
    DatePicker.showDatePicker(
      context,
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
        confirm: Text('确定', style: TextStyle(color: Colors.red)),
        cancel: Text('取消', style: TextStyle(color: Colors.cyan)),
      ),
      minDateTime: DateTime.parse("1980-05-12"),    //起始日期
      maxDateTime: DateTime.parse('2100-05-12'),    //终止日期
      initialDateTime: DateTime.now(),  //获取当前时间
      dateFormat: 'yyyy年M月d日    EEE,H时:m分', //设置:年-月-日的格式

      pickerMode: DateTimePickerMode.datetime,    // show TimePicker
      locale: DateTimePickerLocale.zh_cn, //设置:语言-中文
      onClose: () => print("----- onClose -----"),    //取消监听器
//      onCancel: () => print('onCancel'),
//      onChange: (dateTime, List index) {       //滑动时间组件时,触发
//        setState(() {
//          _dateTime = dateTime;
//        });
//      },
      onConfirm: (dateTime, List<int> index) {      //确定监听器
        setState(() {
          _dateTime = dateTime;
        });
      },
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DatePickerPubDemo'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                child: Row(
                  children: <Widget>[
                    Text('${formatDate(_dateTime, [yyyy, '', mm, '', dd," ",HH,":",nn])}'),
                    Icon(Icons.arrow_drop_down)
                  ],
                ),
                onTap: _showDatePicker
              )
            ],
          )
        ],
      ),
    );
  }
}

你可能感兴趣的:(Flutter,学习)