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

简介

Scroll DateTime Picker 是一个高度可定制的Flutter包，允许您轻松选择日期、时间或两者。它受到 CupertinoDatePicker 的启发，为您的日期和时间选择需求提供了丰富的功能。

主要特性

• 🗓️ 自定义日期/时间格式：根据您的具体要求调整日期和时间格式。
• 📅 自定义日期/时间顺序：安排日期和时间元素以满足您的偏好。
• 🌍 自定义日期/时间语言环境：确保日期和时间显示的语言环境准确性。
• ✏️ 自定义日期/时间文本样式：个性化日期和时间文本的外观。
• 🛞 自定义滚轮外观：定义滚轮的外观，从平面到圆形。
• 📜 选择无限滚动或有限滚动：根据需要选择滚动方式。
• 🧠 智能检测无效日期和闰年处理：确保用户体验顺畅。

使用方法

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  scroll_datetime_picker: ^latest_version

然后运行命令：

dart pub add scroll_datetime_picker

2. 导入包

在 Dart 文件中导入包：

import 'package:scroll_datetime_picker/scroll_datetime_picker.dart';

3. 示例代码

以下是一个完整的示例代码，展示了如何使用 ScrollDateTimePicker 来选择日期和时间，并应用各种自定义选项：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:scroll_datetime_picker/scroll_datetime_picker.dart';

void main() {
  initializeDateFormatting('en'); // 初始化日期格式化
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime date = DateTime.now();
  DateTime time = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll DateTime Picker'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            SizedBox(height: 20),

            // 日期选择器
            ScrollDateTimePicker(
              itemExtent: 54,
              onChange: (datetime) => setState(() {
                date = datetime;
              }),
              itemFlex: const DateTimePickerItemFlex(
                weekdayFlex: 7,
                dayFlex: 2,
                monthFlex: 8,
                yearFlex: 4,
              ),
              dateOption: DateTimePickerOption(
                dateFormat: DateFormat('EEEE, dd MMM yyyy', 'zh'), // 设置日期格式和语言环境
                minDate: DateTime(2000, 6),
                maxDate: DateTime(2024, 6),
                initialDate: date,
              ),
              centerWidget: DateTimePickerCenterWidget(
                builder: (context, constraints, child) => DecoratedBox(
                  decoration: ShapeDecoration(
                    shape: StadiumBorder(side: BorderSide(width: 3)),
                    color: Colors.blueAccent,
                  ),
                ),
              ),
              style: DateTimePickerStyle(
                activeStyle: TextStyle(
                  fontSize: 24,
                  letterSpacing: -0.5,
                  color: Theme.of(context).primaryColor,
                ),
                inactiveStyle: TextStyle(
                  fontSize: 20,
                  color: Theme.of(context).primaryColor.withOpacity(0.7),
                ),
                disabledStyle: TextStyle(
                  fontSize: 20,
                  color: Theme.of(context).disabledColor,
                ),
              ),
            ),
            SizedBox(height: 20),

            // 时间选择器
            ScrollDateTimePicker(
              itemExtent: 54,
              infiniteScroll: true,
              wheelOption: const DateTimePickerWheelOption(
                offAxisFraction: 1,
                perspective: 0.01,
                squeeze: 1.2,
              ),
              dateOption: DateTimePickerOption(
                dateFormat: DateFormat('hh:mm:ss a', 'zh'), // 设置时间格式和语言环境
                minDate: DateTime(2000, 6),
                maxDate: DateTime(2024, 6),
                initialDate: time,
              ),
              onChange: (datetime) => setState(() {
                time = datetime;
              }),
              centerWidget: DateTimePickerCenterWidget(
                builder: (context, constraints, child) => DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.blueAccent,
                    border: Border(
                      top: BorderSide(width: 3),
                      bottom: BorderSide(width: 3),
                    ),
                  ),
                ),
              ),
              style: DateTimePickerStyle(
                activeStyle: TextStyle(
                  fontSize: 28,
                  letterSpacing: -0.5,
                  color: Colors.blueAccent,
                ),
                inactiveStyle: TextStyle(
                  fontSize: 20,
                  color: Theme.of(context).primaryColor.withOpacity(0.7),
                ),
                disabledStyle: TextStyle(
                  fontSize: 20,
                  color: Theme.of(context).disabledColor,
                ),
              ),
            ),
            SizedBox(height: 20),

            // 显示选中的日期和时间
            Text(
              DateFormat('EEEE, dd MMMM yyyy', 'zh').format(date),
              style: Theme.of(context).textTheme.headline6,
              textAlign: TextAlign.center,
            ),
            Text(
              DateFormat('HH:mm:ss', 'zh').format(time),
              style: Theme.of(context).textTheme.headline6,
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

关键配置说明

自定义日期/时间格式

通过设置 dateFormat 属性来调整日期和时间的格式：

dateOption: DateTimePickerOption(
  dateFormat: DateFormat('EEEE, dd MMM yyyy', 'zh'),
),

自定义日期/时间顺序

通过修改 dateFormat 中的模式来调整日期和时间的顺序：

dateOption: DateTimePickerOption(
  dateFormat: DateFormat('yyyy-MM-dd', 'zh'),
),

自定义日期/时间语言环境

通过传递语言环境参数来设置日期和时间的显示语言：

dateOption: DateTimePickerOption(
  dateFormat: DateFormat('EEEE, dd MMM yyyy', 'zh'),
),

自定义文本样式

使用 DateTimePickerStyle 类来自定义文本样式：

style: DateTimePickerStyle(
  activeStyle: TextStyle(
    fontSize: 24,
    letterSpacing: -0.5,
    color: Theme.of(context).primaryColor,
  ),
  inactiveStyle: TextStyle(
    fontSize: 20,
    color: Theme.of(context).primaryColor.withOpacity(0.7),
  ),
  disabledStyle: TextStyle(
    fontSize: 20,
    color: Theme.of(context).disabledColor,
  ),
),

自定义滚轮外观

通过 DateTimePickerWheelOption 类来自定义滚轮的外观：

wheelOption: const DateTimePickerWheelOption(
  offAxisFraction: 1,
  perspective: 0.01,
  squeeze: 1.2,
),

选择无限滚动或有限滚动

通过设置 infiniteScroll 属性来选择滚动方式：

infiniteScroll: true, // 或 false

智能检测无效日期和闰年处理

该插件会自动处理无效日期和闰年问题，确保用户体验顺畅。

结论

Scroll DateTime Picker 提供了丰富的功能和高度的自定义选项，使得开发者可以轻松实现美观且功能强大的日期和时间选择器。希望上述内容能够帮助您快速上手并充分利用这个优秀的Flutter插件。