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

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

AKI DateTime Picker

轻量级且具有Cupertino样式的日期时间选择器。

简介

AKI DateTime Picker 包含三个主要组件：

• AKI DateTime Picker：该组件可以创建一个Cupertino样式的选择器，帮助用户选择日期和时间。
• AKI Date Picker：该组件可以创建一个Cupertino样式的选择器，帮助用户仅选择日期。
• AKI Time Picker：该组件可以创建一个Cupertino样式的选择器，帮助用户仅选择时间。

安装

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

dependencies:
  aki_datetime_picker: ^1.0.4

如何使用

首先，在你的 Dart 文件中导入 aki_datetime_picker 包：

import 'package:aki_datetime_picker/aki_datetime_picker.dart';

基本用法

下面是一个基本用法的示例：

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime selectedDateTime;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期时间选择器示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                final DateTime picked = await showAKIDateTimePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2020),
                  lastDate: DateTime(2025),
                );
                if (picked != null && picked != selectedDateTime) {
                  setState(() {
                    selectedDateTime = picked;
                  });
                }
              },
              child: Text('选择日期时间'),
            ),
            SizedBox(height: 20),
            Text(
              selectedDateTime == null ? '' : selectedDateTime.toString(),
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

自定义

你可以自定义日期时间选择器的各个属性，例如边框颜色、遮罩颜色、初始日期等。下面是一个自定义示例：

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime selectedDateTime;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期时间选择器自定义示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                final DateTime picked = await showAKIDateTimePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2020),
                  lastDate: DateTime(2025),
                  borderColor: Colors.blue,
                  colorMask: Colors.red.withOpacity(0.1),
                  selDate: DateTime.now(),
                  startYear: 2020,
                  endYear: 2025,
                  lblYear: "年",
                  lblMonth: "月",
                  lblDay: "日",
                  lblHour: "时",
                  lblMin: "分",
                  lblColor: Colors.blue,
                  textColor: Colors.green,
                );
                if (picked != null && picked != selectedDateTime) {
                  setState(() {
                    selectedDateTime = picked;
                  });
                }
              },
              child: Text('选择日期时间'),
            ),
            SizedBox(height: 20),
            Text(
              selectedDateTime == null ? '' : selectedDateTime.toString(),
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}