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

2019年5月8日 1,225次阅读 来源: 2远

效果图如下：

《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

    原文作者：2远
    原文地址: https://www.jianshu.com/p/49e0d4f30edb
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞