flutter 调用第三方时间组件

 

flutter_cupertino_date_picker 插件来源

// 插件的官方链接地址，可点击直接跳转到该插件的官方文档页面
https://pub.flutter-io.cn/packages/flutter_cupertino_date_picker

插件的安装方法

// 在Flutter项目的pubspec.yaml文件中添加以下dependencies来安装flutter_cupertino_date_picker插件
dependencies:
    flutter_cupertino_date_picker: ^1.0.12

使用插件 代码实现

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

class DatePage extends StatefulWidget{
  DatePage({Key key});
  _DatePage createState() => _DatePage();
}

class _DatePage extends State {
  // 该方法用于展示日期选择器
  _showDatePicker() {
    DatePicker.showDatePicker(
        context,
        // 设置日期选择器主题
        pickerTheme: DateTimePickerTheme(
          showTitle: true,
          confirm: Text('确定'),
          cancel: Text('取消')
        ),
        // 设置最小和最大选择日期
        minDateTime: DateTime.parse('2020-01-01'), // 注意：月份和日期从1开始，不存在00这种表示方式
        maxDateTime: DateTime.parse('2030-12-31'),
        initialDateTime: DateTime.now(),
        // 设置日期格式
        dateFormat: 'yyyy-MM-dd HH:mm:ss',
        // 设置语言为中文
        locale: DateTimePickerLocale.zh_cn,
        // 设置选择器模式为日期+时间模式
        pickerMode: DateTimePickerMode.datetime,
        // 各种事件回调
        onClose: () {
          print('onClose');
        },
        onCancel: () {
          print('onCancel');
        },
        onChange: (val, List<int> index) {
          print(val);
          print(index);
        },
        onConfirm: (val, List<int> index) {
          print(val);
          print(index);
        },
    );
  }

  @override
  Widget build(BuildContext context) {
    // 返回一个Scaffold，其主体是一个ListView，用于展示日期并提供点击选择日期的功能
    return Scaffold(
      appBar: AppBar(
          title: Text('Date')
      ),
      body: ListView(
        children: <Widget>[
          InkWell(
            child: Column(
              children: <Widget>[
                SizedBox(height: 50,),
                InkWell(
                  // 显示当前日期，点击后会调用_showDatePicker方法展示日期选择器
                  child: Text('${DateTime.now()}'),
                  onTap: () {
                    _showDatePicker();
                  },
                )
              ],
            )
          )
        ],
      )
    );
  }
}