showModalBottomSheet的基本用法，自定义背景和状态管理-CSDN博客

本文链接：https://blog.csdn.net/u012941592/article/details/116520930

本文介绍了Flutter中的showModalBottomSheet组件的使用方法，包括设置背景颜色、阻止点击消失、添加圆角背景以及如何在弹出框中实现状态管理。通过示例代码展示了如何自定义底部面板的行为和样式，以及如何在弹出框内更新内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近使用到了showModalBottomSheet这个组件，俗话说好记性不如烂笔头，总结总结。

1.源码

Future<T> showModalBottomSheet<T>({

  @required BuildContext context,

  @required WidgetBuilder builder,

  Color backgroundColor,    //面板背景颜色

  double elevation,

  ShapeBorder shape,

  Clip clipBehavior,

  Color barrierColor,        //非面板的背景颜色

  bool isScrollControlled = false,

  bool useRootNavigator = false,

  bool isDismissible = true,  //点击外部是否消失

  bool enableDrag = true,    //是否拖拽消失

  RouteSettings routeSettings,

})

2.解决点击面板消失问题

/**

 * 底部面板,相当于弹出了一个新页面

 * 默认点击消失，可以给子组件外面包一层GestureDetector并设置onTap返回false，拦截点击事件使点击底部面板区域，面板不消失。

 */
showModalBottomSheet(
        context: context,
        builder: (context) {
          return StatefulBuilder(
            builder: (context, setStateBottomSheet) {
              return GestureDetector(
                onTap: () {
                  return false;
                },
                child: Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(8),
                        topRight: Radius.circular(8),
                      ),
                      color: Colors.white),
                  height: ScreenAdapter.setHeight(500),
                  padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
                 
                ),
              );
            },
          );
        },
       
        );

3.给面板添加圆角背景

/**
  *设置Container 左上角和右上角为圆角
  *重要的一点设置面板的背景颜色为透明色backgroundColor: Color.fromARGB(0, 255, 255, 0),
  */
showModalBottomSheet(
        context: context,
        builder: (context) {
          return StatefulBuilder(
            builder: (context, setStateBottomSheet) {
              return GestureDetector(
                onTap: () {
                  return false;
                },
                child: Container(     //
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(8),
                        topRight: Radius.circular(8),
                      ),
                      color: Colors.white),
                  height: ScreenAdapter.setHeight(500),
                  padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
                  
                ),
              );
            },
          );
        },
        backgroundColor: Color.fromARGB(0, 255, 255, 0),
        );

4.状态管理

//在使用弹出框是其实是打开了一个新的路由是一个新页面，并不像Android依附于当前Activity，所以调用
// 你使用当前页面的 setState 方法当然是没法更新dialog中的内容的。
//解决办法可以再外面添加StatefulBuilder
int num = 1;
  _show() {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return StatefulBuilder(
//setStateBottomSheet通过这个方法更新弹框里面的内容
            builder: (context, setStateBottomSheet) {
              return GestureDetector(
                onTap: () {
                  return false;
                },
                child: Container(
                  height: 500,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("${num}"),
                      InkWell(
                        child: Icon(Icons.add),
                        onTap: () {
                          setStateBottomSheet(() {
//setStateBottomSheet通过这个方法更新弹框里面的内容
                            num++;
                          });
                        },
                      )
                    ],
                  ),
                ),
              );
            },
          );
        });
  }