Flutter UI基础 - 时间选择器

引入flutter_datetime_picker插件

pubspec.yaml文件中引入：

dependencies:
  flutter_datetime_picker: 1.2.6

作用及使用

选择时间组件

1. 参考网址：flutter_datetime_picker

2. 使用方式：

选择日期

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
 
FlatButton(
  onPressed: () {
    DatePicker.showDatePicker(context,
      // 是否展示顶部操作按钮
      showTitleActions: true,
      // 最小时间
      minTime: DateTime(2018, 3, 5),
      // 最大时间
      maxTime: DateTime(2099, 6, 7),
      // change事件
      onChanged: (date) {
        print('change $date');
      },
      // 确定事件
      onConfirm: (date) {
        print('confirm $date');
      },
      // 当前时间
      currentTime: DateTime.now(),
      // 语言
      locale: LocaleType.zh);
  },
  child: Text(
    '选择日期(Chinese)',
    style: TextStyle(color: Colors.blue),
  )
)

选择时间

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
 
FlatButton(
  onPressed: () {
    DatePicker.showTimePicker(context,
        // 是否展示顶部操作按钮
        showTitleActions: true,
        // change事件
        onChanged: (date) {
          print('change $date');
        },
        // 确定事件
        onConfirm: (date) {
          print('confirm $date');
        },
        // 当前时间
        // currentTime: DateTime(2019, 6, 20, 17, 30, 20), // 指定时间
        currentTime: DateTime.now(), // 当前时间
        // 语言
        locale: LocaleType.zh);
  },
  child: Text(
    '仅选择时间(Chinese)',
    style: TextStyle(color: Colors.blue),
  )),

效果如图：

选择日期时间

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
 
FlatButton(
  onPressed: () {
    DatePicker.showDateTimePicker(context,
        // 是否展示顶部操作按钮
        showTitleActions: true,
        // change事件
        onChanged: (date) {
          print('change $date');
        },
        // 确定事件
        onConfirm: (date) {
          print('confirm $date');
        },
        // 当前时间
        currentTime: DateTime.now(),
        // 语言
        locale: LocaleType.zh);
  },
  child: Text(
    '选择日期时间(Chinese)',
    style: TextStyle(color: Colors.blue),
)),

效果如图：

可自定义内容

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
 
FlatButton(
  onPressed: () {
    DatePicker.showPicker(context,
        // 是否展示顶部操作按钮
        showTitleActions: true,
        // change事件
        onChanged: (date) {
          print('change $date');
        },
        // 确定事件
        onConfirm: (date) {
          print('confirm $date');
        },
        // 自定义内容model
        // pickerModel:CommonPickerModel(),
        // 语言
        locale: LocaleType.zh);
  },
  child: Text(
    '自定义选择框(Chinese)',
    style: TextStyle(color: Colors.blue),
  )),

效果如图：

 

 

转自：https://blog.csdn.net/isusjjyy/article/details/102800270