Flutter时间选择插件cupertino_duration_picker的使用

Flutter时间选择插件cupertino_duration_picker的使用

cupertino_duration_picker 是一个受 Google 时间选择器启发的时间选择器插件。它基于 NumberPicker 和 WidgetPicker 构建。

🚧 提示：此包仍在开发中。

TODO 列表：

  • ❌ 添加测试。
  • ❌ 添加文档。
  • ❌ 添加示例。

使用示例

以下是一个完整的示例代码，展示如何在 Flutter 中使用 cupertino_duration_picker 插件。

示例代码

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

void main() {
  runApp(new ExampleApp());
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cupertino Duration Picker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Cupertino Duration Picker 示例'),
          bottom: TabBar(
            tabs: [
              Tab(text: '时间选择器'),
              Tab(text: '其他页面'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            // 时间选择器页面
            Center(
              child: _IntegerExample(),
            ),
            // 其他页面
            Center(
              child: Text('其他页面内容'),
            ),
          ],
        ),
      ),
    );
  }
}

class _IntegerExample extends StatefulWidget {
  @override
  __IntegerExampleState createState() => __IntegerExampleState();
}

class __IntegerExampleState extends State<_IntegerExample> {
  Duration _duration = Duration(seconds: 64); // 默认时间为 64 秒

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '当前时间: ${_formatDuration(_duration)}', // 显示当前选择的时间
          style: TextStyle(fontSize: 20),
        ),
        SizedBox(height: 20),
        CupertinoDurationPicker( // 使用 CupertinoDurationPicker
          onChangeValue: (duration) => setState(() => _duration = duration), // 更新时间
          value: _duration, // 当前选中的时间
          units: { // 定义时间单位
            TimeUnitName.seconds: '秒',
            TimeUnitName.minutes: '分钟',
            TimeUnitName.hours: '小时',
            TimeUnitName.days: '天',
            TimeUnitName.weeks: '周',
            TimeUnitName.months: '月',
            TimeUnitName.years: '年',
          },
        ),
      ],
    );
  }

  String _formatDuration(Duration duration) {
    // 格式化时间
    int hours = duration.inHours;
    int minutes = duration.inMinutes.remainder(60);
    int seconds = duration.inSeconds.remainder(60);
    return '$hours 小时 $minutes 分钟 $seconds 秒';
  }
}

运行效果

运行上述代码后，您将看到一个时间选择器，支持选择秒、分钟、小时、天、周、月和年的组合。用户可以通过滑动选择具体的时间值，并实时更新显示。

Cupertino Duration Picker 示例

说明

  1. 导入依赖： 确保在 pubspec.yaml 文件中添加了 cupertino_duration_picker 依赖：
    dependencies:
  cupertino_duration_picker: ^0.1.0

更多关于Flutter时间选择插件cupertino_duration_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter时间选择插件cupertino_duration_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


cupertino_duration_picker 是 Flutter 中一个用于选择时长的 Cupertino 风格的时间选择器插件。它允许用户选择小时、分钟和秒的时长。以下是如何使用 cupertino_duration_picker 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 cupertino_duration_picker 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_duration_picker: ^1.0.0

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 cupertino_duration_picker 包：

import 'package:cupertino_duration_picker/cupertino_duration_picker.dart';

3. 使用 CupertinoDurationPicker

CupertinoDurationPicker 是一个 Cupertino 风格的时长选择器。你可以通过以下方式使用它：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Duration _selectedDuration = Duration(hours: 0, minutes: 0, seconds: 0);

  void _showDurationPicker() {
    showCupertinoModalPopup(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 250,
          child: CupertinoDurationPicker(
            initialDuration: _selectedDuration,
            onDurationChanged: (Duration newDuration) {
              setState(() {
                _selectedDuration = newDuration;
              });
            },
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cupertino Duration Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Duration: ${_selectedDuration.inHours}h ${_selectedDuration.inMinutes.remainder(60)}m ${_selectedDuration.inSeconds.remainder(60)}s',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showDurationPicker,
              child: Text('Pick Duration'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 解释代码

  • _selectedDuration 是一个 Duration 类型的变量，用于存储用户选择的时长。
  • _showDurationPicker 方法使用 showCupertinoModalPopup 来显示一个模态弹窗，其中包含 CupertinoDurationPicker。
  • CupertinoDurationPicker 的 initialDuration 参数用于设置初始时长，onDurationChanged 回调在用户选择时长时触发，并更新 _selectedDuration。
  • 在 build 方法中，我们显示当前选择的时长，并提供一个按钮来触发时长选择器。

5. 运行应用

运行你的 Flutter 应用，点击按钮后，你将看到一个 Cupertino 风格的时长选择器。用户可以选择小时、分钟和秒，选择的结果将显示在屏幕上。

6. 自定义选项

CupertinoDurationPicker 还提供了一些自定义选项，例如：

  • mode: 可以选择 CupertinoDurationPickerMode.hms（小时、分钟、秒）或 CupertinoDurationPickerMode.hm（小时、分钟）。
  • interval: 设置分钟和秒的间隔。

例如：

CupertinoDurationPicker(
  initialDuration: _selectedDuration,
  mode: CupertinoDurationPickerMode.hm, // 只选择小时和分钟
  interval: 5, // 分钟和秒的间隔为5
  onDurationChanged: (Duration newDuration) {
    setState(() {
      _selectedDuration = newDuration;
    });
  },
);
回到顶部