Flutter防抖功能插件debounce_flutter的使用

简介

debounce_flutter 是一个简单的 Flutter 插件，用于防止用户频繁触发事件（如按钮点击）。它可以帮助你避免在短时间内多次触发某些操作。

基本用法（Base Usage）

以下是一个简单的例子，展示如何使用 debounce_flutter 来防止重复点击：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Debounce Widget Example')),
        body: Center(
          child: DebounceWidget(
            child: ElevatedButton(
              onPressed: () {
                print('Button clicked');
              },
              child: const Text("Submit"),
            ),
          ),
        ),
      ),
    );
  }
}

解释：

• DebounceWidget 包裹了一个 ElevatedButton。
• 当按钮被点击时，DebounceWidget 会阻止重复点击，直到指定的时间间隔过去。

其他参数（Other Usage）

DebounceWidget 提供了一些可选参数，例如自定义回调函数和时间间隔：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Debounce Widget Example')),
        body: Center(
          child: DebounceWidget(
            onDebounce: () => print("Too fast / 太快了"), // 自定义回调函数
            duration: 5000, // 时间间隔（毫秒）
            child: ElevatedButton(
              onPressed: () {
                print('Button clicked');
              },
              child: const Text("登 录"),
            ),
          ),
        ),
      ),
    );
  }
}

参数说明：

• onDebounce: 当用户点击过快时触发的回调函数。
• duration: 设置防抖的时间间隔，默认为 1000 毫秒（1秒）。

全局设置（Global）

你还可以通过修改 DebounceWidget.defaultDuration 来设置全局默认的时间间隔：

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

void main() {
  // 设置全局默认时间为 10 秒
  DebounceWidget.defaultDuration = 10000;

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Debounce Widget Example')),
        body: Center(
          child: DebounceWidget(
            child: ElevatedButton(
              onPressed: () {
                print('Button clicked');
              },
              child: const Text("Submit"),
            ),
          ),
        ),
      ),
    );
  }
}