我一直在编写一个使用底部导航栏的简单应用程序。
使用Navigator在页面之间导航的基本用法如下:
Navigator.of(context).push(...);
当我第一次使用底部导航栏时,我会自动假设底部导航栏几乎在所有页面中都存在,除非它被告知消失,我认为这是一种期望或预期的行为。
因此,与其问如何在应用程序中保持或控制底部导航栏,我想问以下问题:
我是否以错误的方式接近(思考(底部导航栏?我对底部导航栏的期望是错误的吗?
如果没有,那么在使用推送和弹出等导航方法时,底部导航栏应该消失的原因是什么?
最后,为了理解flutter的导航和底部导航栏,我需要知道什么?
谢谢!
我认为你的主要误解是,当你使用工具栏时,你认为你需要使用Navigator
和推送和弹出页面。在使用栏切换选项卡时,不应该使用Navigator
。每个选项卡仍然是同一个页面,您只需使用底部栏中的按钮切换页面的内容。
最好的理解方法可能是在这里检查并使用BottomNavigationBar
官方文档中的示例。你可以尝试一下,然后在页面上运行
要更改页面,同时保留底部的应用程序栏,请使用pag-eview小部件。它接受您可以导航到的子屏幕,而无需创建新堆栈。这里有一个例子-
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
final PageController _pageController = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.portrait), title: Text('Profile')),
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart), title: Text('Shop'))
],
onTap: _onTappedBar,
selectedItemColor: Colors.orange,
currentIndex: _selectedIndex,
),
body: PageView(
controller: _pageController,
children: <Widget>[
ProfilePage(),
HomeTables(),
ShoppingPage(),
],
),
);
}
void _onTappedBar(int value) {
setState(() {
_selectedIndex = value;
});
_pageController.jumpToPage(value);
}
}