Flutter BottomSheet 底部滑出的组件

本文主要是介绍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);
});

效果图

完整代码

查看完整代码

 

这篇关于Flutter BottomSheet 底部滑出的组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---