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

作者: 2远 | 来源:发表于2019-04-26 10:50 被阅读13次

效果图如下：

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