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

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,以便下一次可以再次打开底部菜单。

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

猜你喜欢

转载自blog.csdn.net/iotjin/article/details/129613306
今日推荐