flutter子页面使用drawer隐藏bottomNavigationBar
时间: 2024-09-19 13:08:53 浏览: 80
在Flutter中,如果你想要在抽屉(Drawer)打开时隐藏底部导航栏(BottomNavigationBar),你可以使用`Scaffold`组件的一些特性来实现这个效果。首先,确保你的`Scaffold`有一个`drawer`属性用于创建抽屉,并且它包含一个`BottomNavigationBar`作为其部分。
下面是一个简单的示例:
```dart
import 'package:flutter/material.dart';
class DrawerPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Main Page'),
),
drawer: Drawer(
child: ListView(
// 添加你的菜单项
ListTile(
leading: Icon(Icons.menu),
title: Text('Menu Item'),
onTap: () => _toggleNavigationBar(context), // 切换底部导航栏显示/隐藏
),
),
),
bottomNavigationBar: showNavigationBar ? BottomNavigationBar() : Container(), // 使用条件判断显示/隐藏底部导航栏
// 其他Scaffold属性...
floatingActionButton: FloatingActionButton(),
);
}
bool showNavigationBar = true; // 初始化状态,默认显示底部导航栏
void _toggleNavigationBar(BuildContext context) {
setState(() {
showNavigationBar = !showNavigationBar;
});
}
}
```
在这个例子中,当你点击抽屉中的某个菜单项时,会触发`_toggleNavigationBar`函数,它会切换`showNavigationBar`的状态。当`showNavigationBar`为`false`时,`bottomNavigationBar`将不会显示。
阅读全文