Flutter时间选择插件duration_picker的使用

Duration Picker for flutter

Duration Picker 是一个用于选择时间间隔的小部件，它受到了Material Design 时间选择器小部件的启发。下面将详细介绍如何设置本地化、添加更多语言以及示例用法。

设置本地化

为了支持其他语言，开发者需要配置类似于时间选择器的本地化设置。以下是为英语和韩语配置的例子：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Duration Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        DurationPickerLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [Locale('en'), Locale('ko')],
      home: const MyHomePage(title: 'Duration Picker Demo'),
    );
  }
}

添加更多语言

1. 在localizataions目录中添加一个本地化类：

   class DurationPickerLocalizationsKo extends DurationPickerLocalizations {
     [@override](/user/override)
     String get baseUnitHour => '시간';
   
     [@override](/user/override)
     String get baseUnitMillisecond => '밀리초';
     // ...
   }
   

2. 将语言代码添加到_DurationPickerLocalizationDelegate中的supportedLocales数组：

   class _DurationPickerLocalizationDelegate
       extends LocalizationsDelegate<DurationPickerLocalizations> {
     const _DurationPickerLocalizationDelegate();
   
     static const supportedLocales = ['en', 'ko'];
   
     // ...
   }
   

3. 在_DurationPickerLocalizationDelegate的load方法中返回一个DurationPickerLocalizations实现：

   [@override](/user/override)
   Future<DurationPickerLocalizations> load(Locale locale) async {
     switch (locale.languageCode) {
       case 'ko':
         return DurationPickerLocalizationsKo();
       default:
         return DurationPickerLocalizationsEn();
     }
   }
   

示例用法

首先在pubspec.yaml文件中添加依赖项：

dependencies:
  duration_picker: "^1.0.0"

然后在Dart代码中使用如下：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Duration Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Duration Picker Demo'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Duration _duration = Duration(hours: 0, minutes: 0);
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
                child: DurationPicker(
              duration: _duration,
              onChange: (val) {
                setState(() => _duration = val);
              },
            ))
          ],
        ),
      ),
      floatingActionButton: Builder(
          builder: (BuildContext context) => FloatingActionButton(
                onPressed: () async {
                  var resultingDuration = await showDurationPicker(
                    context: context,
                    initialTime: Duration(minutes: 30),
                  );
                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                      content: Text('Chose duration: $resultingDuration')));
                },
                tooltip: 'Popup Duration Picker',
                child: Icon(Icons.add),
              )),
    );
  }
}

此外，可以进一步自定义DurationPicker以满足具体需求，例如设置基础单位、上下限等：

Expanded(
  child: DurationPicker(
    duration: _duration,
    baseUnit: BaseUnit.second,
    onChange: (val) {
      setState(() => _duration = val);
    },
    upperBound: const Duration(seconds: 120),
    lowerBound: const Duration(seconds: 5),
  ),
)

通过以上步骤，您就可以成功地在Flutter项目中使用duration_picker插件了。