/**
* 底部面板,相当于弹出了一个新页面
* 默认点击消失,可以给子组件外面包一层GestureDetector并设置onTap返回false,拦截点击事件使点击底部面板区域,面板不消失。
* 底部面板的高度是有限制的,不能设置全屏高度
*/
Future<T> showModalBottomSheet<T>({
@required BuildContext context,
@required WidgetBuilder builder,
Color backgroundColor,
double elevation,
ShapeBorder shape, //弹窗shape
Clip clipBehavior,
Color barrierColor,
bool isScrollControlled = false,
bool useRootNavigator = false,
bool isDismissible = true,//能否点击消失
bool enableDrag = true,//能否拖拽消失
})
body: Center(
child: Row(
children: <Widget>[
RaisedButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200.0,
color: Color(0xfff1f1f1),
child: Center(
child: Text("底部面板,点击消失"),
),
);
},
);
},
child: Text("底部面板,点击消失"),
),
RaisedButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return GestureDetector(
child: Container(
height: 2000.0,
color: Color(0xfff1f1f1),
child: Center(
child: Text("底部面板,点击底部面板不消失"),
),
),
onTap: () => false,
);
},
);
},
child: Text("底部面板,点击底部面板不消失"),
),
],
),
),
//BottomSheet相当于一个新页面,可以通过Navigator.of(context).pop();关闭;
body: Container(
child: RaisedButton(
onPressed: () {
showModalBottomSheet(
context: context,
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
enableDrag: false,//设置不能拖拽关闭
isDismissible: false,//设置不能点击消失
builder: (BuildContext context) {
return new Container(
height: 300.0,
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("点击关闭"),
),
],
));
},
).then((val) {
print(val);
});
},
child: Text("按钮"),
),
)
//点击蒙层不关闭页面
showModalBottomSheet(
context: context,
// 关键代码
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return StatefulBuilder(builder: (stateContext, state) {
return GestureDetector(
child: Container(
height: 200,
color: Colors.red,
),
// 关键代码
onVerticalDragUpdate: (e) => false,
);
});
});
码云地址:https://gitee.com/xgljh/Flutter.git