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

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

time_picker_spinner 是一个带有选择器的时间选择器插件，而不是默认的Material设计时间选择器。该组件支持12小时或24小时格式，并且支持自定义间隔模式。此外，该包还支持阿拉伯语和英语的本地化。

Demo gif

安装

1. 将以下内容添加到您的 pubspec.yaml 文件中：

dependencies:
  time_picker_spinner: any

1. 使用IDE的GUI或者命令行获取包：

$ pub get

1. 在您的应用中导入 time_picker_spinner.dart 文件：

import 'package:time_picker_spinner/time_picker_spinner.dart';

功能

• 支持12小时制
• 支持24小时制
• 支持阿拉伯语和英语的本地化

使用

英文示例

TimePickerSpinner(
  locale: const Locale('en', ''), // 设置为英文
  time: dateTime, // 当前时间
  is24HourMode: false, // 是否为24小时制
  isShowSeconds: true, // 是否显示秒
  itemHeight: 80, // 项目高度
  normalTextStyle: const TextStyle(
    fontSize: 24,
  ), // 正常文本样式
  highlightedTextStyle: const TextStyle(fontSize: 24, color: Colors.blue), // 高亮文本样式
  isForce2Digits: true, // 是否强制两位数
  onTimeChange: (time) { // 时间改变时的回调
    setState(() {
      dateTime = time;
    });
  },
)

阿拉伯语示例

TimePickerSpinner(
  locale: const Locale('ar', ''), // 设置为阿拉伯语
  time: dateTime, // 当前时间
  is24HourMode: false, // 是否为24小时制
  isShowSeconds: true, // 是否显示秒
  itemHeight: 80, // 项目高度
  normalTextStyle: const TextStyle(
    fontSize: 24,
  ), // 正常文本样式
  highlightedTextStyle: const TextStyle(fontSize: 24, color: Colors.blue), // 高亮文本样式
  isForce2Digits: true, // 是否强制两位数
  onTimeChange: (time) { // 时间改变时的回调
    setState(() {
      dateTime = time;
    });
  },
)

属性

其他信息

这是一个更新后的包，原始包来自 icemanbsi/flutter_time_picker_spinner。

完整示例

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Time Picker Spinner Example')),
        body: Center(
          child: TimePickerWidget(),
        ),
      ),
    );
  }
}

class TimePickerWidget extends StatefulWidget {
  [@override](/user/override)
  _TimePickerWidgetState createState() => _TimePickerWidgetState();
}

class _TimePickerWidgetState extends State<TimePickerWidget> {
  DateTime dateTime = DateTime.now();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TimePickerSpinner(
          locale: const Locale('en', ''), // 设置为英文
          time: dateTime, // 当前时间
          is24HourMode: false, // 是否为24小时制
          isShowSeconds: true, // 是否显示秒
          itemHeight: 80, // 项目高度
          normalTextStyle: const TextStyle(
            fontSize: 24,
          ), // 正常文本样式
          highlightedTextStyle: const TextStyle(fontSize: 24, color: Colors.blue), // 高亮文本样式
          isForce2Digits: true, // 是否强制两位数
          onTimeChange: (time) { // 时间改变时的回调
            setState(() {
              dateTime = time;
            });
          },
        ),
        SizedBox(height: 20),
        Text(
          "Selected Time: ${dateTime.hour}:${dateTime.minute}:${dateTime.second}",
          style: TextStyle(fontSize: 18),
        ),
      ],
    );
  }
}