freddon

发表于2019-08-13

阅读 2209 |

评论 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: [

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);

});

```

以上。

分类 ：日常记录

默认的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: [

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)

先登录，才能发评论哦~