[flutter]设置底部弹窗点击外部不消失,兼容ios CupertinoScaffold与android Scaffold

freddon 发表于2019-08-13   阅读 2287 | 评论 0

默认showModalBottomSheet底部弹窗,点击以外的蒙层会造成弹窗关闭,于是采用showBottomSheet来实现。
默认的showModalBottomSheet是这样: ``` showModalBottomSheet( builder:(BuildContext rootContext) => StatefulBuilder(builder: (context, dialogSetState) { var height = MediaQuery.of(rootContext).viewInsets.bottom; setDialogState = dialogSetState; dialogVisible = true; return Material( color: UIColor.whiteBgColor, child: SingleChildScrollView( child: new AnimatedPadding( padding: EdgeInsets.only( bottom: keyboardIsVisible ? height : kToolbarHeight), //MediaQuery.of(context).viewInsets, //边距(必要) duration: const Duration(milliseconds: 100), //时常 (必要) child: dialogContentView(rootContext, dialogSetState)), )); }), elevation: 10) ``` 替换成showBottomSheet之后,报错: ``` flutter: ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════ flutter: The following assertion was thrown while handling a gesture: flutter: No Scaffold widget found. flutter: FlutterController widgets require a Scaffold widget ancestor. ``` 需要一个`Scaffold Widget`,所以针对ios的`CupertinoPageScaffold`内部child又包了一层`Scaffold`: ``` Widget iosPageWidget(BuildContext context) { return CupertinoPageScaffold( backgroundColor: CupertinoColors.white, navigationBar: _iosNavibar(context), child: Scaffold( key: _scaffoldState,//注意这个 body: CustomScrollView(slivers: <Widget>[ SliverToBoxAdapter( child: Padding( padding: EdgeInsets.only(top: AppENV().iosNavHeight(context)), ), ), _contentView(context) ]))); } ``` 然后,在Scaffold中设置GlobalKey: `_scaffoldState`。这时需要调用_`scaffoldState.currentState.showBottomSheet`而不是直接在Widget或者State里调用。并且调用前使用`_scaffoldState.currentState.showBodyScrim(true, 0.2);`会展示一个页面遮罩。 代码如下: ``` showAddGameActionSheet(BuildContext context) { _scaffoldState.currentState.showBodyScrim(true, 0.2); _scaffoldState.currentState .showBottomSheet( (BuildContext rootContext) => StatefulBuilder(builder: (context, dialogSetState) { var height = MediaQuery.of(rootContext).viewInsets.bottom; setDialogState = dialogSetState; dialogVisible = true; return Material( color: UIColor.whiteBgColor, child: SingleChildScrollView( child: new AnimatedPadding( padding: EdgeInsets.only( bottom: keyboardIsVisible ? height : kToolbarHeight), //MediaQuery.of(context).viewInsets, //边距(必要) duration: const Duration(milliseconds: 100), //时常 (必要) child: dialogContentView(rootContext, dialogSetState)), )); }), backgroundColor: Colors.black, elevation: 10) .closed .whenComplete(() { _scaffoldState.currentState.showBodyScrim(false, 0.2); }); ``` 以上。

分类 :日常记录

评论(0)


登录,才能发评论哦~