flutter 对话框形式的底部弹出框

最新推荐文章于 2025-07-15 19:48:42 发布

weixin_33778778

最新推荐文章于 2025-07-15 19:48:42 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：https://juejin.im/post/5cc2728fe51d456e6b5d7e03

本文介绍了一种在Flutter中实现底部弹出菜单的方法，通过使用Stack和Positioned布局配合ListView，创建了一个可自定义的BottomSheet组件。该组件允许在屏幕底部显示一个列表，并可通过点击列表项触发回调。

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

效果图如下：

基本思路：

写一个Widget,基本布局为一个stack，stack内放置一个Position的布局

var stack = Stack(
      alignment: Alignment.topCenter,
      children: <Widget>[
        Positioned(
          bottom: 20,
          child: totalContainer,
        ),
      ],
    );
复制代码

其中totalContainer为一个指定宽高的container包裹的listview

var totalContainer = Container(
      child: listview,
      height: height,
      width: deviceWidth * 0.95,
    );
复制代码

showDialog的时候,返回这个widget

showDialog(
              barrierDismissible: true,
                context: context,
                builder: (BuildContext context) {
                  var list = List();
                  list.add('删除');
                  return CommonBottomSheet(
                    list: list,
                    onItemClickListener: (index) async {
                      Navigator.pop(context);
                    },
                  );
                });
复制代码

barrierDismissible表示是否点击空白区域关闭对话框,默认为true，可以关闭

github