Flutter 点击防抖工具封装及使用

介绍

点击防抖是一种优化手段，用于防止用户在短时间内多次触发相同的操作。在Flutter中，我们可以通过封装一个点击防抖工具来实现这一目的。

使用

首先，我们需要创建一个 Debouncer 类，它将负责处理点击防抖逻辑：

import 'dart:async';

class Debouncer {
  final Duration delay;
  Timer? _timer;

  Debouncer({required this.delay});

  void run(VoidCallback callback) {
    _timer?.cancel();
    _timer = Timer(delay, callback);
  }
}

然后，我们可以在需要防抖的地方使用 Debouncer。以下是一个示例，演示如何在按钮点击事件中应用点击防抖：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Debouncer Example'),
        ),
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final debouncer = Debouncer(delay: Duration(seconds: 2));

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // 使用防抖工具，确保点击事件在2秒内只执行一次
        debouncer.run(() {
          print('Button Clicked!');
        });
      },
      child: Text('Click me'),
    );
  }
}

在上述示例中，通过创建一个 Debouncer 实例，并在按钮点击事件中使用 debouncer.run() 方法，我们确保了按钮点击事件在2秒内只执行一次。