Flutter之showModalBottomSheet函数

/**
 * 底部面板,相当于弹出了一个新页面
 * 默认点击消失,可以给子组件外面包一层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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容