Flutter时间限制插件minimum_duration的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter时间限制插件minimum_duration的使用

Minimum Duration

这是一个简单的工具函数,用于强制一个操作至少花费给定的时间。

这在确保某些“加载”动画至少显示足够长的时间以便用户能看到它时非常有用,即使加载操作完成得非常快。

这是一个非常简单的实现,但它帮助我避免在每个应用程序中重复编写相同的代码,希望也能帮助到你!

开始使用

只需安装该包。

dart/flutter pub add minimum_duration

使用方法

基本用法

使用MinimumDuration很简单!只需将一个函数传递给MinimumDuration.run

setLoading(true);

final result = await MinimumDuration.run(
  () async => someAsyncOperation(),
);

setLoading(false);

在这个例子中,someAsyncOperation的返回值将在至少500毫秒(默认持续时间)后被分配给result

如果您的函数执行时间超过指定的持续时间,它将在完成后立即返回。

自定义持续时间

默认持续时间为500毫秒,但可以通过向duration参数提供一个值轻松覆盖它。

final result = await MinimumDuration.run(
  () async => someAsyncOperation(),
  duration: const Duration(seconds: 1),
);

全局默认持续时间

也可以通过更改MinimumDuration.duration属性来全局设置默认值。

// 在应用程序初始化代码中的某处
MinimumDuration.duration = const Duration(seconds: 1);

// 稍后,在应用程序逻辑中
// 这将以1秒的“默认”持续时间运行
final result = await MinimumDuration.run(
  () async => someAsyncOperation(),
);

这在默认值不符合您的用例并且不想为每次调用MinimumDuration.run传递自定义持续时间的情况下非常有用。

示例代码

import 'package:minimum_duration/minimum_duration.dart';

void main() async {
  await defaultDurationExample();
  await explicitDurationExample();

  MinimumDuration.duration = const Duration(milliseconds: 1500);
  await globallyConfiguredDefaultExample();
  MinimumDuration.reset();
}

Future<void> defaultDurationExample() async {
  final startTime = DateTime.now();

  // 将您的逻辑包装在`MinimumDuration.run`调用中
  final _ = await MinimumDuration.run(() {
    // 这里的逻辑将会执行,但结果不会在最小持续时间到达之前返回(默认为500毫秒)。
    return 'hello world';
  });

  final endTime = DateTime.now();
  final elapsed = endTime.difference(startTime);

  print('[DEFAULT (500ms)] completed in $elapsed');
}

Future<void> explicitDurationExample() async {
  final startTime = DateTime.now();

  // 将您的逻辑包装在`MinimumDuration.run`调用中,
  // 并传递一个`duration`参数。
  final _ = await MinimumDuration.run(
    () => 'hello world',
    duration: const Duration(seconds: 2),
  );

  final endTime = DateTime.now();
  final elapsed = endTime.difference(startTime);

  print('[EXPLICIT (2s)] completed in $elapsed');
}

Future<void> globallyConfiguredDefaultExample() async {
  final startTime = DateTime.now();
  // 设置全局默认持续时间(参见上面`main`函数中的第7行)。
  // 然后像往常一样将您的逻辑包装在`MinimumDuration.run`中。
  final _ = await MinimumDuration.run(() => 'hello world');

  final endTime = DateTime.now();
  final elapsed = endTime.difference(startTime);

  print('[CONFIGURED (1500ms)] completed in $elapsed');
}

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

1 回复

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


当然,以下是一个关于如何在Flutter中使用minimum_duration插件的示例代码。minimum_duration插件通常用于限制用户与某个组件(例如按钮)交互的最短时间。尽管这个插件可能不是官方Flutter插件库的一部分(因为Flutter生态系统非常庞大,且插件不断更新),但我们可以模拟这种功能来实现类似的效果。

假设我们要创建一个按钮,用户点击后,该按钮在指定的最短时间内(比如2秒)变为禁用状态,以防止用户在这么短的时间内重复点击。

1. 添加依赖

首先,确保你的pubspec.yaml文件中没有特定的minimum_duration依赖(因为如前所述,这可能不是一个真实存在的插件)。我们将手动实现这个功能。

2. 实现代码

import 'package:flutter/material.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> {
  bool isButtonDisabled = false;
  DateTime lastClickTime;
  final Duration minimumDuration = Duration(seconds: 2);

  void _handleClick() {
    if (isButtonDisabled) return;

    setState(() {
      isButtonDisabled = true;
      lastClickTime = DateTime.now();
    });

    // Simulate a task that takes some time, e.g., an API call
    Future.delayed(Duration(seconds: 1), () {
      // After the simulated task is complete, check if the button should be re-enabled
      if (DateTime.now().difference(lastClickTime) >= minimumDuration) {
        setState(() {
          isButtonDisabled = false;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Minimum Duration Button'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: isButtonDisabled ? null : _handleClick,
          child: Text('Click Me'),
          style: ElevatedButton.styleFrom(
            primary: isButtonDisabled ? Colors.grey : Colors.blue,
          ),
        ),
      ),
    );
  }
}

解释

  1. 状态管理:我们使用_MyHomePageState来管理按钮的禁用状态isButtonDisabled和上次点击的时间lastClickTime

  2. 按钮点击处理:在_handleClick方法中,我们首先检查按钮是否已经被禁用。如果没有被禁用,则禁用按钮并记录点击时间。然后,我们使用Future.delayed模拟一个异步操作(比如API调用),在操作完成后检查是否已经过了最小持续时间。如果已经过了,则重新启用按钮。

  3. UI更新:在build方法中,我们根据isButtonDisabled的值来决定按钮的样式和是否可点击。

这种方式虽然不依赖于一个特定的minimum_duration插件,但实现了相同的功能。如果你确实找到一个名为minimum_duration的第三方插件,其使用方法可能会略有不同,但核心思想应该是类似的:通过状态管理和时间检查来控制组件的交互。

回到顶部