模态框不遮盖 底部导航栏并且可操作导航栏
时间: 2024-02-17 09:00:38 浏览: 66
底部导航栏
如果你想让模态框不遮盖底部导航栏并且在打开模态框时仍然可以操作导航栏,可以使用 `Stack` 组件来实现。
以下是一个示例代码:
```dart
class MyBottomSheet extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned.fill(
child: GestureDetector(
onTap: () {
// 点击空白处关闭模态框
Navigator.of(context).pop();
},
child: Container(
color: Colors.black.withOpacity(0.5),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
),
height: 300,
width: MediaQuery.of(context).size.width,
child: Column(
children: [
// 模态框的内容
],
),
),
),
],
);
}
}
```
在这个示例中,我们使用 `Stack` 组件来实现模态框和遮罩层的叠加。遮罩层使用 `Positioned.fill` 来撑满整个屏幕,并设置了一个点击事件,用于点击空白处关闭模态框。模态框使用 `Align` 来定位到屏幕底部,并设置了一个圆角边框。这样就可以在打开模态框时仍然可以操作底部导航栏,并且不会被模态框遮盖。
阅读全文