Flutter日期选择器插件z_picker的使用

Flutter日期选择器插件z_picker的使用

z_picker

z_picker 是一个基于 Cupertino 风格的时间选择器和项目选择器。

特性

  • 屏幕适配（基于 375.0 宽度）。
  • 支持英语和中文。

如何使用

时间选择器

showModalBottomSheet(
  barrierColor: Colors.black.withOpacity(0.2), // 设置遮罩颜色
  backgroundColor: Colors.transparent, // 设置背景透明
  context: context, // 当前上下文
  builder: (BuildContext context) {
    return TCRTimePicker(
      title: '请选择时间', // 标题
      beginTime: DateTime.now().add(Duration(days: 1, hours: 1)), // 开始时间
      selectTime: DateTime.now().add(Duration(days: 1, hours: 13)), // 默认选中时间
      callback: (time) { // 回调函数
        print('选中的时间: $time');
      },
    );
  },
);

项目选择器

showModalBottomSheet(
  barrierColor: Colors.black.withOpacity(0.2),
  backgroundColor: Colors.transparent,
  context: context,
  builder: (BuildContext context) {
    return TCRItemPicker(
      initialIndex: 2, // 初始选中索引
      title: '请选择科目', // 标题
      items: ['数学', '英语', '化学', '历史'], // 可选项列表
      callback: (index, item) { // 回调函数
        print('选中的项目: $item');
      },
    );
  },
);

图片展示

项目选择器

项目选择器

时间选择器

时间选择器

完整示例代码

以下是完整的示例代码，展示了如何在 Flutter 中使用 z_picker 插件：

import 'package:flutter/material.dart';
import 'package:z_picker/z_picker.dart'; // 引入 z_picker 插件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 显示时间选择器
  void showTimePicker() {
    showModalBottomSheet(
      barrierColor: Colors.black.withOpacity(0.2),
      backgroundColor: Colors.transparent,
      context: context,
      builder: (BuildContext context) {
        return TCRTimePicker(
          title: '请选择时间',
          beginTime: DateTime.now().add(Duration(days: 1, hours: 1)),
          selectTime: DateTime.now().add(Duration(days: 1, hours: 13)),
          callback: (time) {
            print('选中的时间: $time');
          },
        );
      },
    );
  }

  // 显示项目选择器
  void showItemPicker() {
    showModalBottomSheet(
      barrierColor: Colors.black.withOpacity(0.2),
      backgroundColor: Colors.transparent,
      context: context,
      builder: (BuildContext context) {
        return TCRItemPicker(
          initialIndex: 2,
          title: '请选择科目',
          items: ['数学', '英语', '化学', '历史'],
          callback: (index, item) {
            print('选中的项目: $item');
          },
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(onPressed: showTimePicker, child: Text('时间选择器')),
            TextButton(onPressed: showItemPicker, child: Text('项目选择器')),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


z_picker 是一个用于 Flutter 的日期选择器插件，它提供了简单易用的 API 来选择和显示日期。以下是如何在 Flutter 项目中使用 z_picker 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 z_picker 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  z_picker: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 z_picker 包：

import 'package:z_picker/z_picker.dart';

3. 使用日期选择器

你可以在需要的地方调用 ZPicker.showDatePicker 方法来显示日期选择器。以下是一个简单的示例：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ZPicker Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 显示日期选择器
            DateTime? selectedDate = await ZPicker.showDatePicker(
              context,
              initialDate: DateTime.now(),
              firstDate: DateTime(2000),
              lastDate: DateTime(2100),
            );

            if (selectedDate != null) {
              print("Selected Date: $selectedDate");
            } else {
              print("Date selection canceled");
            }
          },
          child: Text('Select Date'),
        ),
      ),
    );
  }
}

4. 参数说明

ZPicker.showDatePicker 方法有几个可选参数：

  • context: 上下文，通常是 BuildContext。
  • initialDate: 初始选择的日期，默认是当前日期。
  • firstDate: 允许选择的最早日期。
  • lastDate: 允许选择的最晚日期。
  • locale: 本地化设置，默认是系统语言。

5. 处理选择的日期

ZPicker.showDatePicker 返回一个 DateTime 对象，表示用户选择的日期。如果用户取消了选择，返回值为 null。

6. 运行应用

现在你可以运行你的 Flutter 应用，点击按钮后应该会弹出日期选择器。选择日期后，选择的日期会被打印到控制台。

7. 自定义日期选择器

z_picker 还提供了更多的自定义选项，比如设置日期格式、选择时间等。你可以查看插件的文档来了解更多详细信息。

8. 其他注意事项

  • 确保你在使用 ZPicker.showDatePicker 时传入的 context 是有效的，否则可能会导致错误。
  • 如果你需要处理时间选择，z_picker 也提供了 showTimePicker 方法。

示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ZPicker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ZPicker Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            DateTime? selectedDate = await ZPicker.showDatePicker(
              context,
              initialDate: DateTime.now(),
              firstDate: DateTime(2000),
              lastDate: DateTime(2100),
            );

            if (selectedDate != null) {
              print("Selected Date: $selectedDate");
            } else {
              print("Date selection canceled");
            }
          },
          child: Text('Select Date'),
        ),
      ),
    );
  }
}
回到顶部