Flutter中如何让ListTile仅响应一次点击？

以下是几种实用的解决方案，可根据你的场景选择：

方法一：用状态变量控制点击状态 #

在StatefulWidget的状态类中定义布尔变量标记跳转状态，点击时先判断状态，避免重复触发：

class YourPage extends StatefulWidget {
  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  // 标记是否正在处理页面跳转
  bool _isNavigating = false;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      // 其他属性...
      onTap: () {
        // 如果正在跳转，直接返回
        if (_isNavigating) return;
        
        setState(() => _isNavigating = true);
        
        // 执行其他前置逻辑...
        
        // 跳转页面，完成后重置状态
        Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => Scaffold(appBar: AppBar()))
        ).then((_) {
          setState(() => _isNavigating = false);
        });
      },
    );
  }
}

方法二：用AbsorbPointer阻止重复点击 #

将ListTile包裹在AbsorbPointer组件中，跳转时禁止组件接收点击事件，页面返回后恢复：

class YourPage extends StatefulWidget {
  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  bool _isNavigating = false;

  @override
  Widget build(BuildContext context) {
    return AbsorbPointer(
      absorbing: _isNavigating,
      child: ListTile(
        // 其他属性...
        onTap: () {
          setState(() => _isNavigating = true);
          
          // 其他前置逻辑...
          
          Navigator.of(context).push(
            MaterialPageRoute(builder: (context) => Scaffold(appBar: AppBar()))
          ).then((_) {
            setState(() => _isNavigating = false);
          });
        },
      ),
    );
  }
}

方法三：封装通用防重复点击工具（复用性强） #

如果多个组件需要防重复点击，可封装通用函数减少重复代码：

class YourPage extends StatefulWidget {
  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  bool _isActionInProgress = false;

  // 通用防重复点击方法
  void _executeSingleAction(Future<void> Function() action) async {
    if (_isActionInProgress) return;
    _isActionInProgress = true;
    try {
      await action();
    } finally {
      setState(() => _isActionInProgress = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      // 其他属性...
      onTap: () {
        _executeSingleAction(() async {
          // 其他前置逻辑...
          await Navigator.of(context).push(
            MaterialPageRoute(builder: (context) => Scaffold(appBar: AppBar()))
          );
        });
      },
    );
  }
}

这些方案的核心逻辑一致：触发跳转后锁定点击状态，直到页面跳转完成或返回后再解锁，从根源避免多次点击导致的重复跳转。

内容的提问来源于stack exchange，提问作者My Car