Flutter时间范围选择插件timeframe_selector的使用

该插件实现了一个时间范围选择器，类似于你在日历中使用的那种。它被设计为类似于日期时间范围选择器，但用于选择时间段而不是具体日期。

在找不到合适的选择器后，我决定自己开发一个，并且现在你找到了它。

查看演示: https://firebon.de:8081/TimeframeDemo/

特性

• 移动和缩放时间范围
• 阻止特定时间段的选择
• 定义最小段数

使用方法

由于这是一个相对简单的组件，不处理自己的状态，你应该将其放在一个StatefulWidget中。

TimeframeSelector(
  baseTimeframe: DateTimeRange(
    start: DateTime(0, 1, 1, 10), // 起始时间
    end: DateTime(0, 1, 1, 24), // 结束时间
  ),
  timeSegmentLength: const Duration(minutes: 30), // 每个时间段的长度
  minTimeframeSegments: 4, // 最小段数
  selectedTimeframe: selectedTimeframe, // 当前选中的时间段
  overlayDatas: [
    OverlayData(
      timeframes: [
        DateTimeRange(
          start: DateTime(0, 1, 1, 15), // 阻止选择的时间段起始时间
          end: DateTime(0, 1, 1, 17), // 阻止选择的时间段结束时间
        ),
      ],
    ),
  ],
  onTimeframeChange: (newTimeframe) => setState(
    () {
      selectedTimeframe = newTimeframe;
    },
  ),
),

示例代码

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

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:timeframe_selector/timeframe_selector.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: TimeFrameExample(),
      ),
    );
  }
}

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

  [@override](/user/override)
  State<TimeFrameExample> createState() => _TimeFrameExampleState();
}

class _TimeFrameExampleState extends State<TimeFrameExample> {
  DateTimeRange? selectedTimeframe;

  String? getTimeframeString() {
    if (selectedTimeframe != null) {
      final startString = DateFormat.Hm().format(
        selectedTimeframe!.start,
      );
      final endString = DateFormat.Hm().format(
        selectedTimeframe!.end,
      );
      return "$startString - $endString";
    }
    return null;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(getTimeframeString() ?? "No selection"), // 显示当前选中的时间段
          ),
          TimeframeSelector(
            baseTimeframe: DateTimeRange(
              start: DateTime(0, 1, 1, 10), // 时间范围的起始时间
              end: DateTime(0, 1, 1, 24), // 时间范围的结束时间
            ),
            timeSegmentLength: const Duration(minutes: 30), // 每个时间段的长度
            minTimeframeSegments: 4, // 最小段数
            maxTimeframeSegments: 8, // 最大段数
            selectedTimeframe: selectedTimeframe, // 当前选中的时间段
            overlayDatas: [
              OverlayData(
                timeframes: [
                  DateTimeRange(
                    start: DateTime(0, 1, 1, 15), // 阻止选择的时间段起始时间
                    end: DateTime(0, 1, 1, 17), // 阻止选择的时间段结束时间
                  ),
                ],
              ),
              OverlayData(
                timeframes: [
                  DateTimeRange(
                    start: DateTime(0, 1, 1, 20), // 阻止选择的时间段起始时间
                    end: DateTime(0, 1, 1, 22), // 阻止选择的时间段结束时间
                  ),
                ],
                color: Colors.green.withOpacity(0.2), // 阻止选择的时间段颜色
                borderColor: Colors.green.withOpacity(0.4), // 阻止选择的时间段边框颜色
                blockSelection: false, // 是否阻止选择
                child: const Text("Hello world!"), // 阻止选择的时间段子部件
                onTap: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text("Hello world!")), // 点击阻止选择的时间段时显示的提示信息
                  );
                },
              ),
            ],
            onTimeframeChange: (newTimeframe) => setState(
              () {
                selectedTimeframe = newTimeframe; // 更新当前选中的时间段
              },
            ),
          ),
        ],
      ),
    );
  }
}