Flutter BottomSheet 底部滑出的组件

通常很少直接使用 BottomSheet 而是使用 showModalBottomSheet。(这是官网原话，我也没弄明白BottomSheet是怎么使用的)

下面介绍 showModalBottomSheet组件

参数详解

属性	说明
context	上下文
builder	WidgetBuilder
backgroundColor	背景颜色
elevation	阴影
shape	形状
isScrollControlled	滚动控制   默认false

示例代码

showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
        return new Container(
            height: 200.0,
            child: Container(
              alignment: Alignment.center,
              child: Text('我是底部滑出的 弹窗'),
            )
        );
    },
);

当然，只弹出并不能满足我们的需求，我们的需求往往是点击弹窗后返回点击的数据，我们可以这样写

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
      return new Container(
          height: 200.0,
          child: Container(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                RaisedButton(
                  child: Text('你好'),
                  onPressed: (){
                    Navigator.pop(context,'你好');
                  },
                ),
                RaisedButton(
                  child: Text('我好'),
                  onPressed: (){
                    Navigator.pop(context,'我好');
                  },
                ),
                RaisedButton(
                  child: Text('大家好'),
                  onPressed: (){
                    Navigator.pop(context,'大家好');
                  },
                ),

              ],
            ),
          )
      );
  },
).then((val) {
  // 打印 点击返回的数据
  print(val);
});

效果图

完整代码

查看完整代码