Flutter时间选择插件duration_spinbox的使用

Flutter时间选择插件duration_spinbox的使用

安装 💻

为了开始使用Duration Spinbox，您必须在您的机器上安装Flutter SDK。

通过flutter pub add进行安装：

dart pub add duration_spinbox

或者直接在pubspec.yaml文件中添加以下行：

duration_spinbox: ^0.1.0

使用

目前，此插件仅以mm:ss格式显示持续时间，将来会提供更多自定义选项。

基本用法

唯一必需的参数是value，它是初始/当前持续时间。

DurationSpinbox(
  value: Duration(minutes: 1),
),

这类似于DropDownButton，您需要在更改时更新值。如下所示：

var _duration = Duration(minutes: 1);

// ...

DurationSpinbox(
  value: _duration,
  onChanged: (value){
    setState(() {
      _duration = value;
    });
  },
),

设置最小值和最大值

默认情况下，最小值为Duration.zero，但最大值默认为null。

DurationSpinbox(
  value: Duration(minutes: 1),
  min: Duration(minutes: 1),
  max: Duration(minutes: 5),
),

设置步长值

步长值是值增加或减少的持续时间。默认值为Duration(minutes: 1)。

DurationSpinbox(
  value: Duration.zero,
  stepValue: Duration(minutes: 5),
),

若要允许负值，您需要手动将最小值设置为null。

DurationSpinbox(
  value: Duration(minutes: 0),
  min: null,
),

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用duration_spinbox插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
        ),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Duration Spinbox Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  Duration _duration = const Duration(minutes: 1);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('默认 (min=Duration.zero, 没有状态)'),
            const DurationSpinbox(
              value: Duration(minutes: 1),
            ),
            const Divider(),
            const Text('带状态'),
            DurationSpinbox(
              value: _duration,
              onChanged: (value) {
                setState(() {
                  _duration = value;
                });
              },
            ),
            const Divider(),
            const Text('带有最小值和最大值'),
            const DurationSpinbox(
              value: Duration(minutes: 1),
              min: Duration(minutes: 1),
              max: Duration(minutes: 5),
            ),
            const Divider(),
            const Text('无边界，步长为5分钟'),
            const DurationSpinbox(
              value: Duration(minutes: 0),
              min: null,
              stepValue: Duration(minutes: 5),
            ),
            const Divider(),
          ],
        ),
      ), // 这个尾随的逗号使自动格式化更美观。
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用duration_spinbox插件来选择时间的示例代码。duration_spinbox是一个允许用户通过旋转选择器来选择持续时间的Flutter插件。

首先，确保你已经在pubspec.yaml文件中添加了duration_spinbox依赖：

dependencies:
  flutter:
    sdk: flutter
  duration_spinbox: ^latest_version # 请替换为最新版本号

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

接下来，你可以在你的Flutter项目中按照以下方式使用DurationSpinBox：

import 'package:flutter/material.dart';
import 'package:duration_spinbox/duration_spinbox.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(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  Duration _selectedDuration = Duration.zero;

  void _onDurationChanged(Duration newDuration) {
    setState(() {
      _selectedDuration = newDuration;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Duration SpinBox Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DurationSpinBox(
              initialDuration: _selectedDuration,
              onChanged: _onDurationChanged,
              decoration: InputDecoration(
                labelText: 'Select Duration',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            Text(
              'Selected Duration: ${_selectedDuration.inHours}h ${_selectedDuration.inMinutes % 60}m ${_selectedDuration.inSeconds % 60}s',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个DurationSpinBox组件。用户可以通过旋转选择器来选择持续时间，并且选择的结果会实时更新并显示在页面上。

代码解析

  1. 依赖导入：

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

  2. 主应用入口：

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

  3. 应用主题和主页：

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

  4. 主页状态管理：

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

class _MyHomePageState extends State<MyHomePage> {
  Duration _selectedDuration = Duration.zero;

  void _onDurationChanged(Duration newDuration) {
    setState(() {
      _selectedDuration = newDuration;
    });
  }

  5. 构建UI：

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Duration SpinBox Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DurationSpinBox(
              initialDuration: _selectedDuration,
              onChanged: _onDurationChanged,
              decoration: InputDecoration(
                labelText: 'Select Duration',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            Text(
              'Selected Duration: ${_selectedDuration.inHours}h ${_selectedDuration.inMinutes % 60}m ${_selectedDuration.inSeconds % 60}s',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

这段代码展示了如何在Flutter应用中使用duration_spinbox插件来选择持续时间，并将选择结果展示给用户。希望这个示例对你有帮助！

回到顶部