我目前正在开发一个跨平台的应用程序,我想在桌面和平板电脑视图中使用侧边栏导航,但在移动的中使用底部导航栏,因为在手机上使用侧边栏并不方便。我在导航部分遇到了麻烦,至于侧边栏,我可以很容易地使用推()函数。但是对于bottomNavBar,我必须使用onItemTapped函数和索引等。有没有简单的方法可以一起使用它们/在它们之间切换?
这是我的边栏导航:
@override
Widget build(BuildContext context) {
return ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => page),
);
},
这是我尝试做底部导航栏导航的方法:
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
body: PageNavigationItem.items.elementAt(_selectedIndex),
);
} // build method
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
2条答案
按热度按时间kuhbmx9i1#
据我所知,除非你“制作自己的底部导航栏”,否则没有办法解决你的问题。
不过我想问一下你是否不想用Drawer widget来代替底部导航栏,因为这是一种保持应用跨平台一致性的方法,遵循flutters的项目指南,并允许你使用push,从某种意义上说,它是一个“侧栏”。
我会做我自己的底部导航栏,如果我觉得我需要它,无论什么,像这样:
在主页面类MyHomePage中使用此扩展无状态控件{ const MyHomePage({Key?key}):超级(键:键);
这就是结果
但说真的,使用Drawer widget更容易、更好
zsbz8rwp2#
是的,这是可能的,一旦检查下面的示例代码.
演示其工作原理的视频。https://drive.google.com/file/d/1BxK6qevJOu4qYrmnoTXdIYtqLAVC87ya/view?usp=share_link
这里我们为Title和onTap创建一个模型
这里我们正在创建一个DataModel列表,以便在Title和onTap中使用。
获取设备的功能是移动的或平板电脑
下面是该页面完整代码。
我希望这些东西能解决你的问题