Flutter中如何设置点击按钮仅弹出一次bottom sheet底部弹窗

你使用的share库的Share.share方法为异步方法，快速连续点击按钮会多次触发该方法调用，导致多个底部弹窗被依次推入路由栈，最终出现重叠展示的问题。

核心思路为通过状态锁拦截重复的分享触发请求，始终保证同一时间只有一个分享流程在执行。

方案1：状态防抖锁（最常用） #

在页面状态中新增一个布尔变量作为分享流程的锁，同一时间仅允许执行一次分享逻辑，执行完毕后自动释放锁：

import 'package:share/share.dart';
import 'package:flutter/foundation.dart';

class YourPageState extends State<YourPage> {
  // 分享流程状态锁，true代表正在执行分享，false代表空闲
  bool _isSharing = false;

  void _handleShareTap() async {
    // 正在分享时直接拦截重复点击
    if (_isSharing) return;
    // 上锁
    _isSharing = true;
    try {
      // 执行你的分享逻辑
      await Share.share('需要分享的文本内容');
    } catch (err) {
      // 捕获异常避免锁无法释放
      debugPrint('分享异常: $err');
    } finally {
      // 无论分享成功/失败/用户手动关闭弹窗，都释放锁
      _isSharing = false;
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _handleShareTap,
      child: const Text('分享按钮'),
    );
  }
}

方案2：点击后临时禁用按钮交互 #

也可以直接控制按钮的可点击状态，分享流程执行完毕前按钮无法再次触发点击：

class YourPageState extends State<YourPage> {
  bool _buttonEnabled = true;

  void _handleShareTap() async {
    _buttonEnabled = false;
    // 主动刷新页面更新按钮状态
    if (mounted) setState(() {});
    try {
      await Share.share('需要分享的文本内容');
    } finally {
      _buttonEnabled = true;
      if (mounted) setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _buttonEnabled ? _handleShareTap : null,
      child: const Text('分享按钮'),
    );
  }
}

问题复现效果 #

修复后预期效果 #

内容的提问来源于stack exchange，提问作者Nam Nguy