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

特性

• 易于使用
• 完全可定制

开始使用

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  ...
  time_picker_wheel: <version>

然后运行flutter pub get来安装插件。

使用方法

首先，在你的 Dart 文件中导入 time_picker_wheel 包：

import 'package:time_picker_wheel/time_picker_wheel.dart';

默认样式

你可以直接使用默认样式的 TimePicker：

TimePicker(
  onChange: (timeOfDay) {
    // 当时间改变时调用的回调函数
  },
),

自定义样式

你也可以自定义 TimePicker 的样式：

TimePicker(
  onChange: (timeOfDay) {
    // 当时间改变时调用的回调函数
  },
  options: TimePickerOptions.byDefault(
    height: 200,           // 滚轮的高度
    itemExtent: 30,        // 每一项的高度
    diameterRatio: 1,      // 滚轮的直径比例
    selectedRowHeight: 70, // 选中行的高度
    fontOpacity: 1,        // 字体透明度
    fontColor: Colors.purple, // 字体颜色
    labelSize: 25,         // 标签字体大小
    numberSize: 25,        // 数字字体大小
    amPmSize: 15,          // AM/PM字体大小
    amPmWidth: 25,         // AM/PM宽度
    wheelWidth: 50,        // 滚轮宽度
    selectedRowHorizontalPadding: double.maxFinite, // 选中行的水平填充
    selectedRowHorizontalBorderRadius: 0, // 选中行的水平圆角半径
    selectedRowForegroundColor: Colors.black, // 选中行的前景色
    selectedRowBackgroundColor: Colors.amber, // 选中行的背景色
  ),
),

示例代码

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

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:spaces2/spaces2.dart';
import 'package:time_picker_wheel/time_picker_wheel.dart';

void main() {
  runApp(
    Spacing.fixed(
      data: SpacingData.generate(16),
      child: const App(),
    ),
  );
}

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

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  String defaultPickerTime = '';
  String customizePickerTime = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text('时间选择器'),
        ),
        body: SpacedColumn(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            defaultStyle(),
            customizeStyle(),
          ],
        ),
      ),
    );
  }

  Widget defaultStyle() {
    return SpacedColumn(
      children: [
        Text(
          '默认样式',
          style: Theme.of(context).textTheme.headlineSmall,
        ),
        TimePicker(
          onChange: (timeOfDay) {
            setState(() {
              defaultPickerTime = getFormatedTimeFromTimeOfDay(timeOfDay);
            });
          },
        ),
        Text(
          defaultPickerTime,
          style: Theme.of(context).textTheme.headlineSmall,
        ),
      ],
    );
  }

  Widget customizeStyle() {
    return SpacedColumn(
      children: [
        Text(
          '自定义样式',
          style: Theme.of(context).textTheme.headlineSmall,
        ),
        TimePicker(
          onChange: (timeOfDay) {
            setState(() {
              customizePickerTime = getFormatedTimeFromTimeOfDay(timeOfDay);
            });
          },
          options: TimePickerOptions.byDefault(
            height: 200,
            itemExtent: 30,
            diameterRatio: 1,
            selectedRowHeight: 70,
            fontOpacity: 1,
            fontColor: Colors.purple,
            labelSize: 25,
            numberSize: 25,
            amPmSize: 15,
            amPmWidth: 25,
            wheelWidth: 50,
            selectedRowHorizontalPadding: double.maxFinite,
            selectedRowHorizontalBorderRadius: 0,
            selectedRowForegroundColor: Colors.black,
            selectedRowBackgroundColor: Colors.amber,
          ),
        ),
        Text(
          customizePickerTime,
          style: Theme.of(context).textTheme.headlineSmall,
        ),
      ],
    );
  }

  String getFormatedTimeFromTimeOfDay(TimeOfDay timeOfDay) {
    final hour = timeOfDay.hourOfPeriod.toString().padLeft(2, '0');
    final minute = timeOfDay.minute.toString().padLeft(2, '0');
    final period = timeOfDay.period.name.toUpperCase();

    String time = '$hour:$minute $period';

    log(time);

    return time;
  }
}