[英]Flutter bottomNavigationBar not change pages
I have a Bottom Navigation Item that is not currently switching the pages, I have a feeling that I am not correctly implementing this, but I am unsure of what 我有一个当前无法切换页面的底部导航项,我感觉我没有正确实现此功能,但是我不确定
class bottomNavigation extends StatefulWidget {
@override
_bottomNavigation createState() => _bottomNavigation();
}
class _bottomNavigation extends State<bottomNavigation> {
int currentNavItem = 0;
homeScreen home;
agendaScreen agenda;
List<Widget> pages;
Widget currentPage;
@override
void initState(){
home = homeScreen();
agenda = agendaScreen();
pages = [home, agenda];
currentPage = home;
super.initState();
}
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.deepPurpleAccent,
unselectedItemColor: Colors.grey,
selectedFontSize: 16,
currentIndex: currentNavItem,
onTap: (int index) {
setState(() {
currentNavItem = index;
currentPage = pages[index];
},
);
},
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today),
title: Text("Agenda"),
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
title: Text("Orders"),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_balance_wallet),
title: Text("Wallet"),
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
title: Text("Chat"),
),
],
);
}
}
I am expecting to see the agendaPage when I click on the Agenda item in the list. 当我单击列表中的“议程”项目时,我希望看到议程页面。 Where in this am I going wrong in order to implement the BottomNavigationBar correctly
为了正确实现BottomNavigationBar,我在哪里出错了?
You should put BottomNavigationBar
widget inside a Scaffold
. 您应该将
BottomNavigationBar
小部件放置在Scaffold
。
Here's an example, taken from Flutter SDK Site : 这是一个示例,摘自Flutter SDK网站 :
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
// Implement body for each page here, separated by coma, in this example, we create a simple Text widget as the body for each page.
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
// When user tap on one of the navigation item
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
Whenever you change the internal state of a [State] object, make the change in a function that you pass to [setState]. 每当更改[State]对象的内部状态时,都要在传递给[setState]的函数中进行更改。 Basically, you need to do two things -
基本上,您需要做两件事-
Add the following method to your class: 将以下方法添加到您的类中:
void onItemTapped(int index) {
setState(() {
currentNavItem = index;
currentPage = pages[index];
});
}
and pass this function to onTab like this : 然后将此函数传递给onTab:
onTap: (int index){
setState(() {
onItemTapped(index);
});
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.