flutter - 如何在颤动的底部导航栏中添加抽屉?
问题描述
我想在用户单击 4th( more_vert
) 图标时显示一个抽屉,但我无法实现它。在我当前的实现中,当单击第 4 个图标时,flutter 会将我带到一个新页面,并且抽屉不会像应有的那样显示在当前屏幕上。我究竟做错了什么 ?另外,BottomNavigationBar 和 BottomAppBar 之间的区别是什么,我在任何地方都找不到区别。我查看了几篇文章,我认为 BottomAppBar 用于显示 Fab 浮动在底部应用程序栏中。两者之间是否还有其他区别,何时应该使用一种而不是另一种。
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<Widget> _widgetOptions = <Widget>[
Page1(),
Page2(),
Page3(),
Page4(), // this page implements the drawer
];
int _currentSelected = 0;
void _onItemTapped(int index) {
setState(() {
_currentSelected = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _widgetOptions.elementAt(_currentSelected),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: _onItemTapped,
currentIndex: _currentSelected,
showUnselectedLabels: true,
unselectedItemColor: Colors.grey[800],
selectedItemColor: Color.fromRGBO(10, 135, 255, 1),
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(AntDesign.carryout),
),
BottomNavigationBarItem(
icon: Icon(MaterialCommunityIcons.sack),
),
BottomNavigationBarItem(
icon: Icon(Octicons.archive),
),
BottomNavigationBarItem(
icon: Icon(Icons.more_vert),
)
],
),
// backgroundColor: Colors.black,
);
}
}
解决方案
你不需要额外的页面。你可以这样做:
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<Widget> _widgetOptions = <Widget>[
Page(),
Page(),
Page(),
];
int _currentSelected = 0;
GlobalKey<ScaffoldState> _drawerKey = GlobalKey();
void _onItemTapped(int index) {
index == 3
? _drawerKey.currentState.openDrawer()
: setState(() {
_currentSelected = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _drawerKey,
body: _widgetOptions.elementAt(_currentSelected),
drawer: Drawer(),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: _onItemTapped,
currentIndex: _currentSelected,
showUnselectedLabels: true,
unselectedItemColor: Colors.grey[800],
selectedItemColor: Color.fromRGBO(10, 135, 255, 1),
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
title: Text('Page 1'),
icon: Icon(Icons.access_alarm),
),
BottomNavigationBarItem(
title: Text('Page 2'),
icon: Icon(Icons.accessible),
),
BottomNavigationBarItem(
title: Text('Page 3'),
icon: Icon(Icons.adb),
),
BottomNavigationBarItem(
title: Text('Drawer'),
icon: Icon(Icons.more_vert),
)
],
),
);
}
}
class Page extends StatelessWidget {
const Page({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container();
}
}
为实现抽屉的 Scaffold 添加 GlobalKey 并在根 Scaffold 中实现 Drawer。
推荐阅读
- ios - Visual Studio - Xamarin 表单应用程序未通过“与 Mac 配对”部署到 iOS
- kubernetes - 如何在项目中限制终止 k8s 集群
- python - Python中嵌套列表的替代方案
- python - 如果匹配列表元素,则屏蔽子字符串,Python
- javascript - 空手道尝试在 iframe - iframe - 元素中使用一些元素并且看不到元素( UI )
- git - 带有 Laravel Sail 和版本控制的 Laravel 8 开发项目
- c++ - 如何在不反转字符串的情况下将堆栈值分配给 C++ 中的字符串?
- c++ - 可变参数模板运算符
- regex - 使用 Procmail/Formail/Regex 更正电子邮件标题中的错误
- javascript - Checkbox - ischecked jQuery 验证