Flutter - 快速点击弹出多个弹框优化

西半球

已于 2023-03-17 10:21:34 修改

阅读量620

点赞数

分类专栏： Flutter 文章标签： flutter android ios

于 2023-03-17 10:21:13 首次发布

本文链接：https://blog.csdn.net/iotjin/article/details/129613306

版权

Flutter 专栏收录该内容

58 篇文章

订阅专栏

在Flutter开发中，通过设置一个布尔值_isBottomSheetOpen来控制showModalBottomSheet的显示，避免用户快速点击多次导致多个底部菜单同时出现，提高应用的用户体验。当底部菜单关闭时，将标志设为false，确保底部菜单只能单次打开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo 地址: https://github.com/iotjin/jh_flutter_demo
代码不定时更新，请前往github查看最新代码

在 Flutter 中使用 showModalBottomSheet 弹出底部菜单时，如果用户快速点击多次会弹出多个底部菜单，这会影响用户体验。为了避免这种情况发生，我们可以使用一个 flag 来控制底部菜单是否已经打开，只有在底部菜单关闭之后才能再次打开。

示例代码如下：

bool _isBottomSheetOpen = false;

void _showBottomSheet() {
  if (!_isBottomSheetOpen) { // 如果底部菜单未打开
    _isBottomSheetOpen = true; // 设置打开标志
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 200,
          child: Center(
            child: Text('Bottom Sheet'),
          ),
        );
      },
    ).whenComplete(() { // 当底部菜单关闭时
      _isBottomSheetOpen = false; // 设置关闭标志
    });
  }
}

在上面的代码中，我们使用一个布尔值 _isBottomSheetOpen 来记录底部菜单是否已经打开。在 _showBottomSheet 方法中，如果底部菜单未打开，我们将 _isBottomSheetOpen 设置为 true，并调用 showModalBottomSheet 方法打开底部菜单。当底部菜单关闭时，我们将 _isBottomSheetOpen 设置为 false，以便下一次可以再次打开底部菜单。

通过这种方式，我们可以避免用户快速点击多次导致多个底部菜单同时打开的情况发生，从而提高了用户体验。