デモアドレス: https://github.com/iotjin/jh_flutter_demo
代码不定时更新，请前往github查看最新代码
Flutter で showModalBottomSheet を使用してボトム メニューをポップアップする場合、ユーザーがすばやく複数回クリックすると、複数のボトム メニューがポップアップし、ユーザー エクスペリエンスに影響します。これを防ぐために、フラグを使用して下部メニューが開いているかどうかを制御し、下部メニューが閉じられた後にのみ再度開くことができます。
サンプルコードは次のとおりです。
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 に設定して、次に一番下のシートを再度開くことができるようにします。
このようにして、ユーザーが複数のクイッククリックを行ったために複数の下部メニューが同時に開かれるという状況を回避できるため、ユーザーエクスペリエンスが向上します。