通常很少直接使用 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);
});
效果图
完整代码