showBottomSheet 如何添加 创建模态屏障
时间: 2024-01-25 10:02:02 浏览: 27
要在 `showBottomSheet` 中添加模态屏障,可以使用 `ModalBarrier` Widget,将其作为 `Stack` 的子 Widget,与 BottomSheet Widget 组合在一起。以下是一个示例代码:
```dart
showBottomSheet(
context: context,
builder: (BuildContext context) {
return Stack(
children: <Widget>[
// 模态屏障
ModalBarrier(
color: Colors.black.withOpacity(0.5),
dismissible: true,
),
// BottomSheet
Container(
margin: EdgeInsets.only(top: 100),
height: 300,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Center(
child: Text('BottomSheet Content'),
),
),
],
);
},
);
```
在这个例子中,我们使用 `Stack` 将模态屏障和 BottomSheet 组合在一起,其中模态屏障使用 `ModalBarrier` Widget 来实现,设置 `color` 属性为半透明黑色,`dismissible` 属性为 `true` 表示可以通过点击模态屏障来关闭 BottomSheet。BottomSheet 的部分与之前的示例代码类似。注意,这里的 `margin` 属性可以用来控制 BottomSheet 相对于模态屏障的位置。