Flutter时间槽管理插件time_slot_plugin的使用

Flutter时间槽管理插件time_slot_plugin的使用

Getting Started

time_slot_plugin 是一个用于获取时间槽列表的 Flutter 插件。该插件可以帮助你在指定的时间范围内生成一系列时间槽，并且可以根据需求进行自定义。

获取时间段列表

你可以使用 getTimeSlotList() 方法来获取从开始时间到结束时间之间的一系列 TimeOfDay 对象。这些对象表示了各个时间段。

void getTimeSlotList() {
  TimeOfDay start = const TimeOfDay(hour: 9, minute: 0);
  TimeOfDay close = const TimeOfDay(hour: 21, minute: 0);
  int intervalInMins = 30;
  list = TimeSlotPlugin.getTimeSlotList(
      start: start, close: close, intervalTimeInMin: intervalInMins);
  setState(() {});
}

获取时间段对象列表

除了获取时间段列表外，你还可以获取时间段对象列表。每个时间段对象都有一个 isSelected 属性，可以用来标记某个时间段是否被选中。

void getTimeSlotObjectList() {
  TimeOfDay start = const TimeOfDay(hour: 9, minute: 0);
  TimeOfDay close = const TimeOfDay(hour: 21, minute: 0);
  int intervalInMins = 30;
  timeSlotList = TimeSlotPlugin.getTimeSlotObjectList(
      start: start, close: close, intervalTimeInMin: intervalInMins);
  setState(() {});
}

示例代码

以下是完整的示例代码，展示了如何使用 time_slot_plugin 插件来管理和选择时间段。

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

import 'package:flutter/services.dart';
import 'package:time_slot_plugin/time_slot_plugin.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 存储时间段列表
  List<TimeOfDay> list = [];
  // 存储时间段对象列表
  List<TimeSlot> timeSlotList = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化时间段列表
    getTimeSlotList();
    // 初始化时间段对象列表
    getTimeSlotObjectList();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('时间段管理示例'),
        ),
        body: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  Text('时间段列表（时间格式）'),
                  Expanded(
                    child: ListView.builder(
                      itemBuilder: (context, index) {
                        TimeOfDay timeOfDay = list[index];
                        return Chip(label: Text(timeOfDay.format(context)));
                      },
                      itemCount: list.length,
                    ),
                  ),
                ],
              ),
            ),
            VerticalDivider(),
            Expanded(
              child: Column(
                children: [
                  Text('时间段对象列表（时间槽格式）'),
                  Expanded(
                    child: ListView.builder(
                      itemBuilder: (context, index) {
                        TimeSlot timeSlot = timeSlotList[index];
                        return InkWell(
                          onTap: () {
                            timeSlot.isSelected ??= false;
                            timeSlot.isSelected == false
                                ? timeSlot.isSelected = true
                                : timeSlot.isSelected = false;
                            setState(() {});
                          },
                          child: Chip(
                            label: Text(timeSlot.time!.format(context)),
                            backgroundColor: timeSlot.isSelected == null
                                ? Colors.transparent
                                : timeSlot.isSelected!
                                    ? Colors.green
                                    : Colors.transparent,
                          ),
                        );
                      },
                      itemCount: timeSlotList.length,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 获取时间段列表
  void getTimeSlotList() {
    TimeOfDay start = const TimeOfDay(hour: 9, minute: 0);
    TimeOfDay close = const TimeOfDay(hour: 21, minute: 0);
    int intervalInMins = 30;
    list = TimeSlotPlugin.getTimeSlotList(
        start: start, close: close, intervalTimeInMin: intervalInMins);
    setState(() {});
  }

  // 获取时间段对象列表
  void getTimeSlotObjectList() {
    TimeOfDay start = const TimeOfDay(hour: 9, minute: 0);
    TimeOfDay close = const TimeOfDay(hour: 21, minute: 0);
    int intervalInMins = 30;
    timeSlotList = TimeSlotPlugin.getTimeSlotObjectList(
        start: start, close: close, intervalTimeInMin: intervalInMins);
    setState(() {});
  }
}