Flutter时长选择插件 duration_picker_dialog_box 的使用

duration_picker_dialog_box 是一个用于在Flutter应用中选择时长的插件。它允许用户通过UI界面选择不同的时间单位，如天、小时、分钟、秒、毫秒和微秒。

支持的时间单位

• 天 (Days)
• 小时 (Hours)
• 分钟 (Minutes)
• 秒 (Seconds)
• 毫秒 (Milliseconds)
• 微秒 (Microseconds)

示例用法

以下是一个完整的示例代码，展示了如何使用 duration_picker_dialog_box 插件来显示一个时长选择对话框，并初始化时间为7天32分钟23小时54秒23毫秒434微秒。用户可以根据需要更改这些值。

完整示例代码

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

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

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

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

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  Duration _duration = Duration();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
              onPressed: () async {
                Duration? selectedDuration = await showDurationPicker(
                  context: context,
                  initialDuration: Duration(
                    days: 7,
                    minutes: 32,
                    hours: 23,
                    seconds: 54,
                    milliseconds: 23,
                    microseconds: 434,
                  ),
                  durationPickerMode: DurationPickerMode.Hour,
                );
                if (selectedDuration != null) {
                  setState(() {
                    _duration = selectedDuration;
                  });
                }
              },
              child: Text("Show Duration Picker"),
            ),
            SizedBox(height: 20),
            Text(
              "Selected Duration: $_duration",
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            DurationPicker(
              duration: _duration,
              onChange: (value) {
                setState(() {
                  _duration = value;
                });
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Increment',
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

使用说明

1. 导入插件：首先确保你已经在 pubspec.yaml 文件中添加了依赖项：

   dependencies:
     duration_picker_dialog_box: ^latest_version
   

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

2. 显示时长选择对话框：你可以通过调用 showDurationPicker 函数来显示一个时长选择对话框。例如：

   Duration? selectedDuration = await showDurationPicker(
     context: context,
     initialDuration: Duration(days: 7, minutes: 32, hours: 23, seconds: 54, milliseconds: 23, microseconds: 434),
     durationPickerMode: DurationPickerMode.Hour,
   );
   

3. 作为小部件使用：你也可以将 DurationPicker 作为一个小部件直接嵌入到你的布局中：

   DurationPicker(
     duration: _duration,
     onChange: (value) {
       setState(() {
         _duration = value;
       });
     },
   )
   

时间单位模式

你可以指定不同的时间单位模式来限制用户选择的时间范围。例如：

showDurationPicker(
  context: context,
  initialDuration: Duration(),
  durationPickerMode: DurationPickerMode.Hour,
);