Flutter时间选择器插件time_picker_sheet的使用

简介

time_picker_sheet 是一个用于 Flutter 的时间选择器库。通过这个库，你可以轻松地创建一个时间选择器，并且可以根据需求自定义弹出窗口中的小部件。

如何使用

使用 time_picker_sheet 非常简单，只需几行代码即可实现时间选择器弹出。以下是基本用法：

TimePicker.show(
    context: context,
    sheet: TimePickerSheet(
        sheetTitle: '设置会议时间',
        hourTitle: '小时',
        minuteTitle: '分钟',
        saveButtonText: '保存',
    ),
);

如果你希望获取用户选择的时间结果，可以使用 await 来等待结果返回。以下是一个完整的示例代码：

final result = await TimePicker.show<DateTime?>(
    context: context,
    sheet: TimePickerSheet(
        sheetTitle: '设置会议时间',
        hourTitle: '小时',
        minuteTitle: '分钟',
        saveButtonText: '保存',
    ),
);

// 如果用户点击了保存按钮，则 result 不为 null
if (result != null) {
    print('选择的时间是: ${result.hour}:${result.minute}');
}

注意：如果用户关闭时间选择器而未点击保存按钮，结果将会是 null。

自定义选项

time_picker_sheet 提供了许多可自定义的选项，以满足不同的设计需求。以下是所有可配置的选项及其默认值：

可定制的选项

• Sheet 标题及样式
• 关闭图标及其颜色
• 小时标题及样式
• 分钟标题及样式
• 选中小时和分钟的样式
• 保存按钮的颜色与文字
• 时间格式（1位或2位数字）
  • 默认为两位数字格式。
• 小时间隔（最小值和最大值）
  • 默认间隔为 1，范围为 0 到 23。
• 分钟间隔（最小值和最大值）
  • 默认间隔为 15，选项为 0, 15, 30, 45。
• 初始时间
  • 默认为 00:00。

所有这些选项都有默认值，如果你想要更改它们，请通过构造函数进行设置。

完整示例代码

以下是一个完整的示例代码，展示如何使用 time_picker_sheet 插件并实现时间选择器功能：

import 'package:flutter/material.dart';
import 'package:time_picker_sheet/widget/sheet.dart';
import 'package:time_picker_sheet/widget/time_picker.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '时间选择器示例'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 存储用户选择的时间
  DateTime dateTimeSelected = DateTime.now();

  // 打开时间选择器
  void _openTimePickerSheet(BuildContext context) async {
    final result = await TimePicker.show&lt;DateTime?&gt;(
      context: context,
      sheet: TimePickerSheet(
        sheetTitle: '设置会议时间', // 弹窗标题
        minuteTitle: '分钟',         // 分钟标题
        hourTitle: '小时',           // 小时标题
        saveButtonText: '保存',       // 保存按钮文字
      ),
    );

    // 如果用户选择了时间
    if (result != null) {
      setState(() {
        dateTimeSelected = result;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: &lt;Widget&gt;[
            ElevatedButton(
              onPressed: () =&gt; _openTimePickerSheet(context), // 点击按钮打开时间选择器
              child: Text('打开时间选择器'),
            ),
            Text('选择的时间是: ${dateTimeSelected.hour}:${dateTimeSelected.minute}'), // 显示选择的时间
          ],
        ),
      ),
    );
  }
}