Flutter日期选择插件month_year_picker2的使用

Flutter日期选择插件month_year_picker2的使用

month_year_picker2 是一个受 Flutter 的日期选择器设计启发的月份/年份选择器。它允许用户方便地选择月份和年份。

快速开始

以下是使用 month_year_picker2 的步骤：

1. 打开你的 pubspec.yaml 文件，并添加以下依赖项：

   month_year_picker2: ^0.3.0+1
   

   或者在终端中运行以下命令来添加该依赖项：

   flutter pub add month_year_picker2
   

2. 运行 flutter pub get 来获取新添加的依赖项。

3. 在你的代码中导入 month_year_picker2 库：

   import 'package:month_year_picker2/month_year_picker2.dart';
   

   此外，确保你的 MaterialApp 中包含以下 localizationsDelegates：

   MaterialApp(
     localizationsDelegates: [
       GlobalMaterialLocalizations.delegate,
       MonthYearPickerLocalizations.delegate,
     ],
   )
   

4. 在代码中使用 month_year_picker2：

   final selected = await showMonthYearPicker(
     context: context,
     initialDate: DateTime.now(),
     firstDate: DateTime(2019),
     lastDate: DateTime(2023),
   );
   

参数

截图

模式	截图
竖屏模式下的月份选择器（默认区域）
竖屏模式下的年份选择器（默认区域）
竖屏模式下的月份选择器（马来语区域）
竖屏模式下的年份选择器（马来语区域）
竖屏模式下的月份选择器（阿拉伯语区域）
竖屏模式下的年份选择器（阿拉伯语区域）
横屏模式下的月份选择器（默认区域）
横屏模式下的年份选择器（默认区域）
横屏模式下的月份选择器（马来语区域）
横屏模式下的年份选择器（马来语区域）
横屏模式下的月份选择器（阿拉伯语区域）
横屏模式下的年份选择器（阿拉伯语区域）

构建源码

依赖项

1. Dart SDK 版本 3.0.0 或更新。
2. Flutter SDK 版本 3.10 或更新。

步骤

1. 将此 Git 仓库克隆到您的机器上。
2. 运行 .\gen_l10n.ps1 以重新生成本地化字符串。

功能与错误报告

如需报告功能请求或错误，请前往 问题追踪器。

许可证

该项目采用 MIT 许可证。详细信息请参见 许可证文件。

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 month_year_picker2：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';
import 'package:month_year_picker2/month_year_picker2.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Month Year Picker Example',
      home: MyHomePage(),
      localizationsDelegates: [
        GlobalWidgetsLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        MonthYearPickerLocalizations.delegate,
      ],
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? _selected;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Month Year Picker Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_selected == null)
              const Text('No month year selected.')
            else
              Text(DateFormat().add_yM().format(_selected!)),
            TextButton(
              child: const Text('DEFAULT LOCALE'),
              onPressed: () => _onPressed(context: context),
            ),
            TextButton(
              child: const Text('BAHASA MALAYSIA'),
              onPressed: () => _onPressed(context: context, locale: 'ms'),
            ),
            TextButton(
              child: const Text('اللغة العربية'),
              onPressed: () => _onPressed(context: context, locale: 'ar'),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _onPressed({
    required BuildContext context,
    String? locale,
  }) async {
    final localeObj = locale != null ? Locale(locale) : null;
    final selected = await showMonthYearPicker(
      context: context,
      initialDate: _selected ?? DateTime.now(),
      firstDate: DateTime(2019),
      lastDate: DateTime(2030),
      locale: localeObj,
    );

    if (selected != null) {
      setState(() {
        _selected = selected;
      });
    }
  }
}