Flutter日期时间选择器插件cupertino_date_time_picker_loki的使用

Flutter日期时间选择器插件cupertino_date_time_picker_loki的使用

Flutter 的日期选择器控件，iOS 样式

案例1

原作者

https://pub.dev/packages/flutter_cupertino_datetime_picker

用法

1. 添加依赖

在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  cupertino_date_time_picker_loki: ^0.0.3

2. 获取包

执行 Flutter 的命令获取包资源：

$ flutter packages get

3. 导入控件

在项目中导入该控件：

import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

4. 显示控件

BottomSheet形式

/// 显示BottomSheet形式的日期时间选择器。
/// 
/// context: [BuildContext]
/// minDateTime: [DateTime] 日期选择器的最小值
/// maxDateTime: [DateTime] 日期选择器的最大值
/// initialDateTime: [DateTime] 日期选择器的初始值
/// dateFormat: [String] 日期时间格式化
/// locale: [DateTimePickerLocale] 国际化，语言地区
/// pickerMode: [DateTimePickerMode] 显示的类型: date(日期选择器)、time(时间选择器)、datetime(日期时间选择器)
/// pickerTheme: [DateTimePickerTheme] 日期选择器的样式
/// onCancel: [DateVoidCallback] 点击标题取消按钮的回调事件
/// onClose: [DateVoidCallback] 关闭日期时间选择器的回调事件
/// onChange: [DateValueCallback] 选择的日期时间改变的事件
/// onConfirm: [DateValueCallback] 点击标题确定按钮的回调事件
DatePicker.showDatePicker(
  BuildContext context,
  DateTime minDateTime,
  DateTime maxDateTime,
  DateTime initialDateTime,
  String dateFormat,
  DateTimePickerLocale locale: DATETIME_PICKER_LOCALE_DEFAULT,
  DateTimePickerMode pickerMode: DateTimePickerMode.date,
  DateTimePickerTheme pickerTheme: DatePickerTheme.Default,
  DateVoidCallback onCancel,
  DateVoidCallback onClose,
  DateValueCallback onChange,
  DateValueCallback onConfirm,
);

日期选择器控件，可以在页面上显示

/// 显示日期选择器
///
/// minDateTime: [DateTime] 日期选择器的最小值
/// maxDateTime: [DateTime] 日期选择器的最大值
/// initialDateTime: [DateTime] 日期选择器的初始值
/// dateFormat: [String] 日期时间格式化
/// locale: [DateTimePickerLocale] 国际化，语言地区
/// pickerTheme: [DateTimePickerTheme] 日期选择器的样式
/// onCancel: [DateVoidCallback] 点击标题取消按钮的回调事件
/// onChange: [DateValueCallback] 选择的日期时间改变的事件
/// onConfirm: [DateValueCallback] 点击标题确定按钮的回调事件
DatePickerWidget({
  DateTime minDateTime,
  DateTime maxDateTime,
  DateTime initialDateTime,
  String dateFormat: DATETIME_PICKER_DATE_FORMAT,
  DateTimePickerLocale locale: DATETIME_PICKER_LOCALE_DEFAULT,
  DateTimePickerTheme pickerTheme: DatePickerTheme.Default,
  DateVoidCallback onCancel,
  DateValueCallback onChange,
  DateValueCallback onConfirm,
})

时间选择器控件

/// 显示时间选择器
/// 
/// minDateTime: [DateTime] 日期选择器的最小值
/// maxDateTime: [DateTime] 日期选择器的最大值
/// initialDateTime: [DateTime] 日期选择器的初始值
/// dateFormat: [String] 日期时间格式化
/// locale: [DateTimePickerLocale] 国际化，语言地区
/// pickerTheme: [DateTimePickerTheme] 日期选择器的样式
/// minuteDivider: [int] minute restriction, e.g. 5: every 5th minute will be shown (0, 5, 10, 15 ...)
/// onCancel: [DateVoidCallback] 点击标题取消按钮的回调事件
/// onChange: [DateValueCallback] 选择的日期时间改变的事件
/// onConfirm: [DateValueCallback] 点击标题确定按钮的回调事件
TimePickerWidget({
  DateTime minDateTime,
  DateTime maxDateTime,
  DateTime initialDateTime,
  String dateFormat: DATETIME_PICKER_DATE_FORMAT,
  DateTimePickerLocale locale: DATETIME_PICKER_LOCALE_DEFAULT,
  DateTimePickerTheme pickerTheme: DatePickerTheme.Default,
  int minuteDivider: 1,
  DateVoidCallback onCancel,
  DateValueCallback onChange,
  DateValueCallback onConfirm,
})

日期时间选择器控件

/// 显示日期时间选择器
/// 
/// minDateTime: [DateTime] 日期选择器的最小值
/// maxDateTime: [DateTime] 日期选择器的最大值
/// initialDateTime: [DateTime] 日期选择器的初始值
/// dateFormat: [String] 日期时间格式化
/// locale: [DateTimePickerLocale] 国际化，语言地区
/// pickerTheme: [DateTimePickerTheme] 日期选择器的样式
/// onCancel: [DateVoidCallback] 点击标题取消按钮的回调事件
/// onChange: [DateValueCallback] 选择的日期时间改变的事件
/// onConfirm: [DateValueCallback] 点击标题确定按钮的回调事件
DateTimePickerWidget({
  DateTime minDateTime,
  DateTime maxDateTime,
  DateTime initialDateTime,
  String dateFormat: DATETIME_PICKER_DATE_FORMAT,
  DateTimePickerLocale locale: DATETIME_PICKER_LOCALE_DEFAULT,
  DateTimePickerTheme pickerTheme: DatePickerTheme.Default,
  DateVoidCallback onCancel,
  DateValueCallback onChange,
  DateValueCallback onConfirm,
})

5. DateTimePickerLocale

多语言支持:

  • en_us: 美式英语 [Default locale]
  • ar: 阿拉伯语
  • ar_eg: 阿拉伯语(埃及)
  • bn: 孟加拉语
  • bs: 波斯尼亚语
  • de: 德语
  • es: 西班牙语
  • fr: 法语
  • hr: 克罗地亚语
  • hu: 匈牙利语
  • in_id: 印尼语
  • it: 意大利语
  • jp: 日语
  • ko: 韩语
  • nl: 荷兰语
  • pt_br: 葡萄牙语(巴西)
  • ro: 罗马尼亚语
  • ru: 俄语
  • sr_cyrl: 塞尔维亚(西里尔)
  • sr_latn: 塞尔维亚(拉丁文)
  • tr: 土耳其语
  • uk: 乌克兰语
  • vi: 越南语
  • zh_cn: 简体中文

添加更多的语言

1. 添加语言文件

Fork 该项目, 在 lib/src/i18n/ 文件夹中添加语言文件。参考 strings_en_us.dart 文件。

/// English (EN) United States
class _StringsEnUs extends _StringsI18n {
  const _StringsEnUs();

  [@override](/user/override)
  String getCancelText() {
    // TODO 返回标题栏取消按钮的显示文字
    return "Cancel";
  }

  [@override](/user/override)
  String getDoneText() {
    // TODO 返回标题栏确定按钮的显示文字
    return "Done";
  }

  [@override](/user/override)
  List<String> getMonths() {
    // TODO 返回月份的全称 [1月, 2月 ... 12月]
    return ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  }

  [@override](/user/override)
  List<String> getMonthsShort() {
    // TODO 返回月份的简称 [Jan, Feb ... Dec]，返回null默认对全程进行截取，最多截取3位
    return ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  }

  [@override](/user/override)
  List<String> getWeeksFull() {
    // TODO 返回星期几的全称 [周一, 周二 ... 周日]
    return ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  }

  [@override](/user/override)
  List<String> getWeeksShort() {
    // TODO 返回星期几的缩写 [周一, 周二 ... 周日]
    return ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  }
}
2. 添加 DateTimePickerLocale

在 lib/src/i18n/date_picker_i18n.dart 文件中添加新语言对应的 DateTimePickerLocale。

enum DateTimePickerLocale {
  /// English (EN) United States
  en_us,
}
3. 添加 DateTimePickerLocale 和语言的对应关系

在 lib/src/i18n/date_picker_i18n.dart 文件中添加 DateTimePickerLocale 和语言的对应关系。

const Map<DateTimePickerLocale, _StringsI18n> datePickerI18n = {
  DateTimePickerLocale.en_us: const _StringsEnUs(),
};

6. dateFormat

支持的格式模式：

Pattern Meaning Example
yyyy 年份 2019, 2020
yy 年份, 2位数字 19, 20
MMMM 月份 January(en_us), 01(zh_cn)
MMM 月份, 缩写 Jan(en_us), 01(zh_cn)
MM 月份, 2位数字 01, 11
M 月份 1, 11
dd 日期, 2位数字 05, 25
d 日期 5, 25
EEEE 星期 Monday(en_us), 星期一(zh_cn)
EEE 星期, 缩写 Mon(en_us), 周一(zh_cn)
HH 时 (0~23), 2位数字 04, 12, 20
H 时 (0~23) 4, 12, 20
mm 分, 2位数字 05, 40
m 分 5, 40
ss 秒, 2位数字 06, 55
s 秒 6, 55
yyyy年 格式化 2019年, 2020年
H时 格式化 5时, 21时

Date Format Separator

支持的分隔符: |,-/\._:.

7. DateTimePickerTheme

/// 日期时间选择器的样式
///
/// [backgroundColor] 背景色
/// [cancelTextStyle] 默认标题栏取消按钮的样式 [TextStyle]
/// [confirmTextStyle] 默认标题栏确定按钮的样式 [TextStyle]
/// [cancel] 自定义标题栏取消按钮
/// [confirm] 自定义标题栏确定按钮
/// [title] 自定义标题栏。如果指定了自定义标题栏，不显示默认的标题栏。指定自定义的标题栏时必须指定 [titleHeight] 的值
/// [showTitle] 是否显示默认的标题栏。如果设置为false，默认的取消、确定按钮都不会显示，自定义的标题栏不受影响
/// [pickerHeight] 日期选择器的高度
/// [titleHeight] 标题栏的高度
/// [itemHeight] 选择器每一行的高度
/// [itemTextStyle] 选择器每一行的样式 [TextStyle]
const DateTimePickerTheme({
  this.backgroundColor: DATETIME_PICKER_BACKGROUND_COLOR,
  this.cancelTextStyle,
  this.confirmTextStyle,
  this.cancel,
  this.confirm,
  this.title,
  this.showTitle: DATETIME_PICKER_SHOW_TITLE_DEFAULT,
  this.pickerHeight: DATETIME_PICKER_HEIGHT,
  this.titleHeight: DATETIME_PICKER_TITLE_HEIGHT,
  this.itemHeight: DATETIME_PICKER_ITEM_HEIGHT,
  this.itemTextStyle: DATETIME_PICKER_ITEM_TEXT_STYLE,
});

示例

DatePicker

Example: DatePicker Example: DatePickerWidget

TimePicker

Example: TimePicker Example: TimePickerWidget

DateTimePicker

Example: DateTimePicker Example: DateTimePickerWidget

完整示例代码

以下是一个完整的示例代码，展示了如何使用 cupertino_date_time_picker_loki 插件来实现日期选择器。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  DateTime selectedDateTime = DateTime.now();

  void showDatePicker() {
    DatePicker.showDatePicker(
      context,
      minDateTime: DateTime(DateTime.now().year - 100),
      maxDateTime: DateTime(DateTime.now().year + 100),
      initialDateTime: selectedDateTime,
      dateFormat: "yyyy-MM-dd HH:mm:ss",
      pickerMode: DateTimePickerMode.datetime,
      onConfirm: (dateTime, index) {
        setState(() {
          selectedDateTime = dateTime;
        });
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('日期时间选择器示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "选中的日期时间: ${selectedDateTime.toString()}",
              style: const TextStyle(fontSize: 18),
            ),
            ElevatedButton(
              onPressed: showDatePicker,
              child: const Text("选择日期时间"),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter日期时间选择器插件cupertino_date_time_picker_loki的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter日期时间选择器插件cupertino_date_time_picker_loki的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


cupertino_date_time_picker_loki 是一个 Flutter 插件，用于在 iOS 风格的 Cupertino 界面中选择日期和时间。它提供了一个类似于 iOS 原生的日期和时间选择器，适合在 Flutter 应用中实现与 iOS 风格一致的用户体验。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 cupertino_date_time_picker_loki 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_date_time_picker_loki: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用示例

以下是一个简单的示例，展示如何使用 cupertino_date_time_picker_loki 插件来选择日期和时间。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DateTimePickerExample(),
    );
  }
}

class DateTimePickerExample extends StatefulWidget {
  [@override](/user/override)
  _DateTimePickerExampleState createState() => _DateTimePickerExampleState();
}

class _DateTimePickerExampleState extends State<DateTimePickerExample> {
  DateTime _selectedDateTime = DateTime.now();

  Future<void> _showDateTimePicker() async {
    final DateTime? picked = await showCupertinoDateTimePicker(
      context: context,
      initialDateTime: _selectedDateTime,
      minimumDate: DateTime(2000),
      maximumDate: DateTime(2100),
      mode: CupertinoDateTimePickerMode.dateAndTime,
    );

    if (picked != null && picked != _selectedDateTime) {
      setState(() {
        _selectedDateTime = picked;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cupertino DateTime Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Date and Time:',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '${_selectedDateTime.toLocal()}',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showDateTimePicker,
              child: Text('Select Date and Time'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部