showModalBottomSheet 无法显示底部导航栏
时间: 2023-08-02 12:15:12 浏览: 81
`showModalBottomSheet` 是一个弹出式底部面板,它默认会覆盖整个屏幕,因此默认情况下无法显示底部导航栏。如果您需要在 `showModalBottomSheet` 弹出时保留底部导航栏,可以尝试以下方法:
1. 使用 `Scaffold` 来包裹 `showModalBottomSheet` 代码,从而确保底部导航栏可见。
2. 在 `showModalBottomSheet` 的 `builder` 参数中,将内容包裹在一个 `Column` 中,然后将 `Column` 的 `mainAxisSize` 属性设置为 `MainAxisSize.min`,从而使内容只占用其实际需要的空间,而不是覆盖整个屏幕。
下面是一个示例代码:
```dart
void _showModalBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Modal Bottom Sheet'),
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.share),
title: Text('Share'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.edit),
title: Text('Edit'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.delete),
title: Text('Delete'),
onTap: () {},
),
],
),
);
},
);
}
```
在这个示例中,我们使用 `Scaffold` 来包裹 `showModalBottomSheet` 的内容,并设置了一个 `AppBar`。同时,我们将内容包裹在一个 `Column` 中,并将 `mainAxisSize` 属性设置为 `MainAxisSize.min`,以确保内容只占用其实际需要的空间。这样,即使弹出式底部面板出现,底部导航栏也会保持可见。
阅读全文