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

效果图如下:


image.png

基本思路:

  • 写一个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

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

推荐阅读更多精彩内容

  • 国庆后面两天在家学习整理了一波flutter,基本把能撸过能看到的代码都过了一遍,此文篇幅较长,建议保存(star...
    Nealyang阅读 4,391评论 1 17
  • 前言 本文的目的是为了让读者掌握不同布局类Widget的布局特点,分享一些在实际使用过程遇到的一些问题,在《Flu...
    xqqlv阅读 5,309评论 0 18
  • 一个好朋友看见我前阵子画扇子就和我说:“怎么样?我预约你一把红叶和鸟的扇子好不好?”这句话说完我一直记在心里,中间...
    刘佳画室阅读 550评论 8 5
  • 去梦里做一只黄莺 在夜深人静的时候 站在你的窗前 用歌声催眠 把你带入我的梦境 去梦里做一轮明月 在你孤独的时候 ...
    二维蚂蚁阅读 207评论 0 5
  • 第三节 由语言识人 (六)从说话语态识人 1、常用恭维崇敬用语者,较圆滑世故。 2、常用礼貌用语者,能予人尊重和体...
    千年古镇笑医馆阅读 264评论 0 4