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

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

时间选择器表单库

这是一个为Flutter设计的时间选择器库。您可以根据需求自定义表单内的小部件。

新特性

  • saveButtonText 已更改为 saveButtonWidget，因此您可以根据需要自定义保存按钮小部件。
  • saveButtonColor 已更改为 saveButtonStyle，因此您可以根据需要自定义保存按钮样式。

如何使用

使用该库非常简单。只需执行以下操作，您的时间选择器表单就会弹出。

TimePicker.show(
    context: context,
    sheet: TimePickerSheet(
        sheetTitle: '设置会议时间',
        hourTitle: '小时',
        minuteTitle: '分钟',
        saveButtonWidget: Text('保存', style: TextStyle(color: Colors.white)),
    ),
);

如果您想获取时间选择器表单的结果，则必须等待结果。正如您所知，如果我们想要等待结果，我们需要将其作为异步过程处理。因此，请确保这样做。代码应如下所示：

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

从表单返回的结果应该是可空的 DateTime 类型。如果用户关闭了表单，结果将为null。但如果用户点击保存按钮，则结果应为选定时间的 DateTime，这样您就可以获取小时和分钟。

自定义

您可以自定义哪些内容？

  • 表单标题及其样式
  • 关闭图标及其颜色
  • 小时标题及其样式
  • 分钟标题及其样式
  • 选中的小时和分钟及其样式
  • 保存按钮小部件及按钮样式
  • 数字格式（默认为两位数）
  • 小时间隔（最小值和最大值，默认为1，选项从0到23）
  • 分钟间隔（最小值和最大值，默认为15，选项为0, 15, 30, 45）
  • 初始日期时间（默认为00:00）

所有这些内容都有默认值，因此如果您想更改其中之一，请确保通过构造函数进行设置。

完整示例

下面是一个完整的示例，展示了如何使用该插件来创建一个自定义的时间选择器表单。

import 'package:flutter/material.dart';
import 'package:time_picker_sheet_fork/time_picker_sheet.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('时间选择器示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final result = await TimePicker.show<DateTime?>(
                context: context,
                sheet: TimePickerSheet(
                  sheetTitle: '设置会议时间',
                  hourTitle: '小时',
                  minuteTitle: '分钟',
                  saveButtonWidget: Text('保存', style: TextStyle(color: Colors.white)),
                  initialDateTime: DateTime.now(), // 设置初始时间
                  hourInterval: 1, // 每隔1小时
                  minuteInterval: 15, // 每隔15分钟
                  hourMin: 8, // 最小小时
                  hourMax: 18, // 最大小时
                ),
              );

              if (result != null) {
                print('选择的时间: ${result.hour}:${result.minute}');
              } else {
                print('用户取消了选择');
              }
            },
            child: Text('打开时间选择器'),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


time_picker_sheet_fork 是一个 Flutter 插件，用于在应用中显示一个时间选择器。它是 time_picker_sheet 的一个分支版本，提供了类似的功能，但可能有一些自定义的修改或修复。

安装

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  time_picker_sheet_fork: ^1.0.0  # 请根据实际情况填写版本号

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

使用

以下是一个简单的使用示例，展示如何在 Flutter 应用中使用 time_picker_sheet_fork 插件来显示一个时间选择器。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TimePickerExample(),
    );
  }
}

class TimePickerExample extends StatelessWidget {
  Future<void> _showTimePicker(BuildContext context) async {
    final selectedTime = await showModalBottomSheet<TimeOfDay>(
      context: context,
      builder: (BuildContext context) {
        return TimePickerSheet(
          onTimeSelected: (TimeOfDay time) {
            Navigator.pop(context, time);
          },
        );
      },
    );

    if (selectedTime != null) {
      print("Selected time: ${selectedTime.format(context)}");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Picker Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showTimePicker(context),
          child: Text('Show Time Picker'),
        ),
      ),
    );
  }
}
回到顶部