Flutter中如何禁止ListTile等可点击组件被重复多次点击

核心逻辑是通过状态标记拦截重复点击请求，等待异步操作执行完成后再恢复点击权限，适配所有可点击组件，不限于ListTile、Inkwell、GestureDetector。

方案1：状态锁控制（推荐，支持加载状态提示） #

适用于调用Firebase这类耗时较长的异步操作，可同步给用户操作反馈。

1. 在StatefulWidget的State类中定义状态标记

// 初始为false，代表当前没有点击请求在处理
bool _isProcessing = false;

2. 改造ListTile的onTap逻辑与_myFunction异步声明

// 你的Firebase调用函数需改为异步返回Future
Future<void> _myFunction() async {
  // 原有Firebase调用逻辑，例如：
  // await FirebaseFunctions.instance.httpsCallable('yourFunctionName').call();
}

ListTile(
  title: const Text("My List Text"),
  // 处理中直接将onTap设为null，ListTile会自动变为不可点击状态
  onTap: _isProcessing ? null : () async {
    // 先锁定点击
    _isProcessing = true;
    setState(() {});
    try {
      await _myFunction();
      // 此处可添加请求成功后的业务逻辑
    } catch (err) {
      // 捕获异常避免请求失败后锁死点击
      print("请求错误：$err");
    } finally {
      // 无论请求成功失败，最终都恢复可点击状态
      _isProcessing = false;
      // 增加mounted判断，避免组件销毁后调用setState报错
      if (mounted) setState(() {});
    }
  },
  // 可选：处理中在列表项尾部显示加载动画，提示用户正在操作
  trailing: _isProcessing ? const CircularProgressIndicator(strokeWidth: 2) : null,
)

方案2：通用防抖工具函数（轻量复用，无需额外状态） #

适用于不需要展示加载状态，仅需防止短时间重复点击的场景，可全局复用。

1. 定义全局防抖工具

// 存储不同点击事件的上次执行时间
final Map<String, DateTime> _lastExecuteTime = {};

/// 防抖执行函数
/// [tag] 不同点击事件的唯一标识
/// [action] 要执行的业务逻辑
/// [debounceDuration] 防抖间隔，默认500毫秒
void runWithDebounce(
  String tag,
  Function() action, [
  Duration debounceDuration = const Duration(milliseconds: 500),
]) {
  final now = DateTime.now();
  // 对应标识的事件在防抖间隔内已执行过，直接拦截
  if (_lastExecuteTime.containsKey(tag) &&
      now.difference(_lastExecuteTime[tag]!) < debounceDuration) {
    return;
  }
  // 记录执行时间，执行业务逻辑
  _lastExecuteTime[tag] = now;
  action();
}

2. 调用方式

ListTile(
  title: const Text("My List Text"),
  onTap: () {
    runWithDebounce('my_list_tile_firebase_call', () {
      _myFunction();
    });
  },
)

内容的提问来源于stack exchange，提问作者Shirsh Shukla