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

flutter_time_picker_spinner 是一个用于Flutter的时间选择器插件，它提供了类似Spinner的时间选择界面，而不是默认的Material设计风格的时间选择器。

功能展示

12小时制

24小时制

带秒的24小时制

自定义样式

开始使用

要开始使用 flutter_time_picker_spinner 插件，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加依赖：

   dependencies:
     flutter_time_picker_spinner: ^latest_version
   

2. 运行 flutter pub get 来安装依赖。

3. 在你的 Dart 文件中导入包：

   import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart';
   

属性说明

以下是 TimePickerSpinner 的一些常用属性及其默认值：

使用示例

下面是一个完整的示例代码，展示了如何使用 flutter_time_picker_spinner 插件来创建不同样式的时钟选择器。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Time Picker Spinner Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter Time Picker Spinner Demo'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime _dateTime = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: EdgeInsets.only(top: 100),
        child: Column(
          children: <Widget>[
            hourMinute12H(),
            SizedBox(height: 50),
            hourMinuteSecond(),
            SizedBox(height: 50),
            hourMinute15Interval(),
            SizedBox(height: 50),
            hourMinute12HCustomStyle(),
            SizedBox(height: 50),
            Container(
              margin: EdgeInsets.symmetric(vertical: 50),
              child: Text(
                _dateTime.hour.toString().padLeft(2, '0') + ':' +
                    _dateTime.minute.toString().padLeft(2, '0') + ':' +
                    _dateTime.second.toString().padLeft(2, '0'),
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 示例1：12小时制
  Widget hourMinute12H() {
    return TimePickerSpinner(
      is24HourMode: false,
      onTimeChange: (time) {
        setState(() {
          _dateTime = time;
        });
      },
    );
  }

  // 示例2：显示秒数
  Widget hourMinuteSecond() {
    return TimePickerSpinner(
      isShowSeconds: true,
      onTimeChange: (time) {
        setState(() {
          _dateTime = time;
        });
      },
    );
  }

  // 示例3：每15分钟间隔
  Widget hourMinute15Interval() {
    return TimePickerSpinner(
      spacing: 40,
      minutesInterval: 15,
      onTimeChange: (time) {
        setState(() {
          _dateTime = time;
        });
      },
    );
  }

  // 示例4：自定义样式
  Widget hourMinute12HCustomStyle() {
    return TimePickerSpinner(
      is24HourMode: false,
      normalTextStyle: TextStyle(fontSize: 24, color: Colors.deepOrange),
      highlightedTextStyle: TextStyle(fontSize: 24, color: Colors.yellow),
      spacing: 50,
      itemHeight: 80,
      isForce2Digits: true,
      minutesInterval: 15,
      onTimeChange: (time) {
        setState(() {
          _dateTime = time;
        });
      },
    );
  }
}

通过上述示例代码，你可以根据需求调整 TimePickerSpinner 的属性，以满足不同的UI和功能要求。