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

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

本文档将介绍如何在Flutter项目中使用tbldatepicker插件。该插件提供了两个自定义小部件用于日期和时间的选择：TblDatePicker（水平日期选择器）和TblTimePicker（水平时间选择器）。

功能概述

• TblDatePicker: 用户可以从指定范围内选择一个日期。
• TblTimePicker: 用户可以从一组时间槽中选择一个时间。

使用方法

TblDatePicker

TblDatePicker允许用户从指定的日期范围内选择一个日期。

基本用法

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('日期选择器示例')),
        body: Center(
          child: TblDatePicker(
            startDate: DateTime.now().subtract(Duration(days: 30)), // 起始日期
            endDate: DateTime.now().add(Duration(days: 30)),       // 结束日期
            selectDate: DateTime.now(),                            // 初始选中日期
            onTap: (selectedDate) {                                // 日期选择回调
              print('选中的日期: $selectedDate');
            },
          ),
        ),
      ),
    );
  }
}

自定义日期选择器

TblDatePicker(
  startDate: DateTime.now().subtract(Duration(days: 30)),
  endDate: DateTime.now().add(Duration(days: 30)),
  selectDate: DateTime.now(),
  disableWeekDays: ['Sat', 'Sun'], // 禁用周末
  disabledDates: [
    DateTime.now().add(Duration(days: 5)), // 禁用特定日期
  ],
  cardBuilder: (context, isSelected, isDisabled, year, week, date) {
    return Container(
      color: isSelected ? Colors.blue : Colors.white,
      child: Center(
        child: Text(date),
      ),
    );
  },
  onTap: (selectedDate) {
    print('选中的日期: $selectedDate');
  },
)

预览

以下是TblDatePicker的预览效果：

确保将图片文件tbl_date_picker_preview.png放置在项目的assets目录下。

TblTimePicker

TblTimePicker允许用户从一组时间槽中选择一个时间。

基本用法

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('时间选择器示例')),
        body: Center(
          child: TblTimePicker(
            timeSlots: generate24HourTimeSlots(), // 生成24小时的时间槽
            selected: '12:00 PM',                 // 初始选中时间
            onTap: (index, selectedTime) {         // 时间槽选择回调
              print('选中的时间: $selectedTime');
            },
          ),
        ),
      ),
    );
  }
}

自定义时间选择器

TblTimePicker(
  timeSlots: generate24HourTimeSlots(),
  selected: '12:00 PM',
  disabledTimeSlots: ['03:00 PM', '04:00 PM'], // 禁用特定时间槽
  cardBuilder: (context, isSelected, isDisabled, time) {
    return Container(
      color: isSelected ? Colors.blue : Colors.white,
      child: Row(
        children: [
          Icon(
            Icons.access_time,
            color: isSelected ? Colors.white : Colors.black,
          ),
          SizedBox(width: 10),
          Text(
            time,
            style: TextStyle(
              color: isSelected ? Colors.white : Colors.black,
            ),
          ),
        ],
      ),
    );
  },
  onTap: (index, selectedTime) {
    print('选中的时间: $selectedTime');
  },
)

参数说明

TblDatePicker

TblTimePicker

示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中使用tbldatepicker插件。

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('日期与时间选择器示例')),
        body: Column(
          children: [
            TblDatePicker(
              startDate: DateTime.now(),
              selectDate: null,
              endDate: DateTime(2029, 1, 2),
              height: 73,
              disableWeekDays: const ["Sun", "Sat"],
              onTap: (e) {
                print('选中的日期: $e');
              },
            ),
            SizedBox(height: 30),
            TblTimePicker(
              timeSlots: generate24HourTimeSlots(),
              selected: null,
              disabledTimeSlots: ["05:00 PM"],
              onTap: (index, value) {
                print('选中的时间: $value');
              },
            ),
          ],
        ),
      ),
    );
  }
}