Flutter自定义日期时间选择器插件customx_datetime_picker的使用

插件介绍

customx_datetime_picker 是一个受 flutter-cupertino-date-picker 启发的 Flutter 日期时间选择器插件。它允许用户在多种语言中选择日期、时间或日期时间。

支持的语言包括：

• 阿尔巴尼亚语(sq)
• 阿拉伯语(ar)
• 亚美尼亚语(hy)
• 阿塞拜疆语(az)
• 巴斯克语(eu)
• 孟加拉语(bn)
• 保加利亚语(bg)
• 加泰罗尼亚语(cat)
• 中文(zh)
• 丹麦语(da)
• 荷兰语(nl)
• 英语(en)
• 法语(fr)
• 德语(de)
• 印度尼西亚语(id)
• 意大利语(it)
• 日语(jp)
• 哈萨克语(kk)
• 韩语(ko)
• 波斯语(fa)
• 波兰语(pl)
• 葡萄牙语(pt)
• 俄语(ru)
• 西班牙语(es)
• 瑞典语(sv)
• 泰语(th)
• 土耳其语(tr)
• 越南语(vi)
• 高棉语(kh)

你还可以自定义选择器的内容。

示例图片

日期选择器、时间选择器、日期时间选择器

国际化示例

示例应用

使用方法

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("日期时间选择器示例"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示日期时间选择器
              DatePicker.showDateTimePicker(
                context,
                showTitleActions: true,
                minTime: DateTime(2020, 1, 1),
                maxTime: DateTime(2025, 12, 31),
                onChanged: (date) {
                  print('当前选择的日期时间: $date');
                },
                onConfirm: (date) {
                  print('确认的日期时间: $date');
                },
                currentTime: DateTime.now(),
                locale: LocaleType.zh, // 设置为中文
              );
            },
            child: Text("选择日期时间"),
          ),
        ),
      ),
    );
  }
}

说明

1. onPressed: 当按钮被点击时触发。
2. showDatePicker: 显示日期时间选择器。
3. minTime 和 maxTime: 设置日期时间选择器的时间范围。
4. onChanged: 当用户选择不同的日期时间时触发。
5. onConfirm: 当用户确认选择时触发。
6. currentTime: 设置初始显示的日期时间。
7. locale: 设置语言环境（例如中文 LocaleType.zh）。

自定义选择器

如果你想要自定义日期时间选择器的样式，可以继承 CommonPickerModel 类，并实现自己的逻辑。

示例代码

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

// 自定义选择器模型
class CustomPicker extends CommonPickerModel {
  String digits(int value, int length) {
    return '$value'.padLeft(length, "0"); // 补零操作
  }

  CustomPicker({DateTime currentTime, LocaleType locale})
      : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now();
    this.setLeftIndex(this.currentTime.hour); // 设置小时索引
    this.setMiddleIndex(this.currentTime.minute); // 设置分钟索引
    this.setRightIndex(this.currentTime.second); // 设置秒索引
  }

  [@override](/user/override)
  String leftStringAtIndex(int index) {
    if (index >= 0 && index < 24) {
      return this.digits(index, 2); // 返回两位数的小时
    } else {
      return null;
    }
  }

  [@override](/user/override)
  String middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2); // 返回两位数的分钟
    } else {
      return null;
    }
  }

  [@override](/user/override)
  String rightStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2); // 返回两位数的秒
    } else {
      return null;
    }
  }

  [@override](/user/override)
  String leftDivider() {
    return "|"; // 设置左边分隔符
  }

  [@override](/user/override)
  String rightDivider() {
    return "|"; // 设置右边分隔符
  }

  [@override](/user/override)
  List<int> layoutProportions() {
    return [1, 2, 1]; // 设置布局比例
  }

  [@override](/user/override)
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex(),
          )
        : DateTime(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex(),
          );
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("自定义日期时间选择器"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示自定义日期时间选择器
              DatePicker.showPicker(
                context,
                pickerModel: CustomPicker(locale: LocaleType.zh),
              );
            },
            child: Text("显示自定义选择器"),
          ),
        ),
      ),
    );
  }
}