Wigets学习之日期时间

作者：renzp94

时间：2021-07-12 08:48:47

CalendarDatePicker

日期选择器

initialDate：初始化日期(必填)
firstDate：可选的最早日期(必填)
lastDate：可选的最晚日期(必填)
onDateChanged：日期改变事件(必填)
currentDate：当前选择日期
onDisplayedMonthChanged：年月改变事件
initialCalendarMode：日期格式，默认为DatePickerMode.day(天选择)，可选值DatePickerMode.year(年选择)
selectableDayPredicate：可选择的日期，接收一个当前显示的日期参数，返回true则表示当前日期可选，返回false则当前日期不可选

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '日期选择',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期选择'),
      ),
      body: Column(
        children: [
          CalendarDatePicker(
            initialDate: DateTime.now(),
            firstDate: DateTime(1970),
            lastDate: DateTime.now(),
            selectableDayPredicate: (date) {
              return date != DateTime(2021, 7, 1);
            },
            onDisplayedMonthChanged: (value) {
              print('onDisplayedMonthChanged $value');
            },
            onDateChanged: (value) {
              print(value);
            },
          )
        ],
      ),
    );
  }
}

YearPicker

年份选择器

firstDate：可选的最早年份(必填)
lastDate：可选的最晚年份(必填)
selectedDate：已选的年份(必填)
onChanged：年份改变事件(必填)
currentDate：当前选择日期
initialDate：初始化日期

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '年份选择',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('年份选择'),
      ),
      body: Column(
        children: [
          Expanded(
              child: YearPicker(
                  firstDate: DateTime(1970),
                  lastDate: DateTime.now(),
                  selectedDate: DateTime(2020),
                  onChanged: (value) {
                    print(value);
                  })),
        ],
      ),
    );
  }
}

showDatePicker

显示日期选择器

context：上下文(必填)
initialDate：初始化日期(必填)
firstDate：可选的最早日期(必填)
lastDate：可选的最晚日期(必填)
currentDate：当前选择日期
initialEntryMode：日期面板模式，默认为DatePickerEntryMode.calendar(日期面板)，可选DatePickerEntryMode.input(输入框)
selectableDayPredicate：可选择的日期，接收一个当前显示的日期参数，返回true则表示当前日期可选，返回false则当前日期不可选
helpText：顶部标题的文本
cancelText：取消按钮的文本
confirmText：确定按钮的文本
locale：国际化配置
useRootNavigator：是否使用路由，默认为true
routeSettings：路由配置
initialDatePickerMode：日期格式，默认为DatePickerMode.day(天选择)，可选值DatePickerMode.year(年选择)

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '日期选择',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期选择'),
      ),
      body: Column(
        children: [
          Row(
            children: [
              Text('日期选择：'),
              Expanded(
                  child: TextField(
                readOnly: true,
                decoration: InputDecoration(hintText: '请选择日期'),
                onTap: () {
                  showDatePicker(
                      context: context,
                      initialDate: DateTime.now(),
                      firstDate: DateTime(1970),
                      lastDate: DateTime.now(),
                      selectableDayPredicate: (date) {
                        return date != DateTime(2021, 7, 1);
                      },
                      helpText: '请选择一个日期',
                      cancelText: '取消',
                      confirmText: '确定',
                      useRootNavigator: true,
                      initialDatePickerMode: DatePickerMode.day);
                },
              ))
            ],
          ),
        ],
      ),
    );
  }
}

showDateRangePicker

日期范围选择器

context：上下文(必填)
initialDateRange：初始化日期范围
firstDate：可选的最早日期(必填)
lastDate：可选的最晚日期(必填)
currentDate：当前选择日期
initialEntryMode：日期面板模式，默认为DatePickerEntryMode.calendar(日期面板)，可选DatePickerEntryMode.input(输入框)
selectableDayPredicate：可选择的日期，接收一个当前显示的日期参数，返回true则表示当前日期可选，返回false则当前日期不可选
helpText：顶部标题的文本
cancelText：DatePickerEntryMode.input模式下取消按钮的文本
confirmText：DatePickerEntryMode.input模式下确定按钮的文本
saveText：DatePickerEntryMode.calendar模式下确定按钮的文本
fieldStartHintText：DatePickerEntryMode.input模式下开始日期的提示文本
fieldEndHintText：DatePickerEntryMode.input模式下结束日期的提示文本
fieldStartLabelText：DatePickerEntryMode.input模式下开始日期label的文本
fieldEndLabelText：DatePickerEntryMode.input模式下结束日期label的文本
locale：国际化配置
useRootNavigator：是否使用路由，默认为true
routeSettings：路由配置

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '日期范围选择',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期范围选择'),
      ),
      body: Column(
        children: [
          Row(
            children: [
              Text('日期范围选择：'),
              Expanded(
                  child: TextField(
                readOnly: true,
                decoration: InputDecoration(hintText: '请选择日期范围'),
                onTap: () {
                  showDateRangePicker(
                      context: context,
                      firstDate: DateTime(1970),
                      lastDate: DateTime.now(),
                      helpText: '请选择日期范围',
                      cancelText: '取消',
                      confirmText: '确定',
                      saveText: '确定',
                      fieldStartHintText: '请输入开始日期',
                      fieldEndHintText: '请输入结束日期',
                      fieldStartLabelText: '开始日期',
                      fieldEndLabelText: '结束日期');
                },
              ))
            ],
          ),
        ],
      ),
    );
  }
}

CupertinoDatePicker

IOS 风格的日期时间选择器

onDateTimeChanged：时间改变事件(必填)
mode：显示模式，默认为CupertinoDatePickerMode.dateAndTime(日期时间)，可选：CupertinoDatePickerMode.time(时间)、CupertinoDatePickerMode.date(日期)
initialDateTime：初始化日期时间
minimumDate：最小日期
minimumYear：最小年份，默认为1
maximumYear：最大年份
minuteInterval：分钟的粒度，必须是 60 的正整数因子，即一分钟可以分割为60/minuteInterval份，默认为1
use24hFormat：是否使用 24 小时制，默认为false
backgroundColor：背景色

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

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '日期时间选择',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期时间选择'),
      ),
      body: Column(
        children: [
          Expanded(
              child: CupertinoDatePicker(
            onDateTimeChanged: (value) {
              print(value);
            },
            initialDateTime: DateTime.now(),
            minimumDate: DateTime(2021, 6),
            use24hFormat: true,
            backgroundColor: Colors.black38,
          )),
        ],
      ),
    );
  }
}

showTimePicker

时间选择器

context：上下文(必填)
initialTime：初始化时间
useRootNavigator：是否使用路由，默认为true
initialEntryMode：时间面板模式，默认为TimePickerEntryMode.dial(时钟面板)，可选DatePickerEntryMode.input(输入框)
helpText：顶部标题的文本
cancelText：取消按钮的文本
confirmText：确定按钮的文本
routeSettings：路由配置

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '日期时间选择',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期时间选择'),
      ),
      body: Column(
        children: [
          Row(
            children: [
              Text('时间选择：'),
              Expanded(
                  child: TextField(
                readOnly: true,
                decoration: InputDecoration(hintText: '请选择时间'),
                onTap: () {
                  showTimePicker(
                      context: context,
                      initialTime: TimeOfDay.now(),
                      helpText: '请选择时间',
                      cancelText: '取消',
                      confirmText: '确定');
                },
              ))
            ],
          ),
        ],
      ),
    );
  }
}

CupertinoTimerPicker

IOS 风格的时间选择器

onTimerDurationChanged：时间改变事件(必填)
mode：模式，默认为CupertinoTimerPickerMode.hms(时/分/秒)，可选：CupertinoTimerPickerMode.hm(时/分)、CupertinoTimerPickerMode.ms(分/秒)
initialTimerDuration：初始化时间，默认为Duration.zero
minuteInterval：分钟的粒度，必须是 60 的正整数因子，即一分钟可以分割为60/minuteInterval份，默认为1
secondInterval：秒的粒度，必须是 60 的正整数因子，即一分钟可以分割为60/secondInterval份，默认为1
alignment：对齐方式，默认为Alignment.center
backgroundColor：背景色

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

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '日期时间选择',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期时间选择'),
      ),
      body: Column(
        children: [
          Expanded(
              child: CupertinoTimerPicker(
            onTimerDurationChanged: (value) {
              print(value);
            },
            initialTimerDuration: Duration(hours: 12),
            backgroundColor: Colors.orange,
          )),
        ],
      ),
    );
  }
}