我正在使用bottom_navy_bar 5.3.2
创建底部导航栏,但是问题是当我选择一个图标时,它并没有改变页面。
import 'package:bottom_navy_bar/bottom_navy_bar.dart';
当我向左和向右滑动时,效果很好,但在选择时不起作用。
我该如何实现?
代码:
body: SizedBox.expand(
child: PageView(
controller: _pageController,
children: <Widget>[
Home(),
Center(child:Text("data")),
Center(child:Text("data")),
Center(child:Text("data")),
],
onPageChanged: (int index){
setState(() {
_currentIndex = index;
});
},
),
),
bottomNavigationBar: BottomNavyBar(
selectedIndex: _currentIndex,
showElevation: true, // use this to remove appBar's elevation
onItemSelected: (index) {
setState(() => _currentIndex = index);
_pageController.jumpToPage(index);
},
items: [
BottomNavyBarItem(
icon: Icon(Icons.apps),
title: Text('Challenges'),
activeColor: Colors.red,
),
BottomNavyBarItem(
icon: Icon(Icons.people),
title: Text('Users'),
activeColor: Colors.purpleAccent
),
BottomNavyBarItem(
icon: Icon(Icons.message),
title: Text('Messages'),
activeColor: Colors.pink
),
BottomNavyBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
activeColor: Colors.blue
),
],
)
答案 0 :(得分:0)
您的代码运行正常。我认为您没有注意到这些更改,因为每个选定的导航栏项目的PageView
的假发都相同。尝试以下代码:
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
PageController _pageController = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title),),
body: SizedBox.expand(
child: PageView(
controller: _pageController,
children: List.generate(4, (index) {
return Container(child: Center(child:Text("data $index"),),
color: Colors.primaries.elementAt(index),
);
}),
onPageChanged: (int index) {
setState(() => _currentIndex = index);
},
),
),
bottomNavigationBar: BottomNavyBar(
selectedIndex: _currentIndex,
showElevation: true, // use this to remove appBar's elevation
onItemSelected: (index) {
setState(() => _currentIndex = index);
_pageController.jumpToPage(index);
},
items: [
BottomNavyBarItem(
icon: Icon(Icons.apps),
title: Text('Challenges'),
activeColor: Colors.red,
),
BottomNavyBarItem(
icon: Icon(Icons.people),
title: Text('Users'),
activeColor: Colors.purpleAccent
),
BottomNavyBarItem(
icon: Icon(Icons.message),
title: Text('Messages'),
activeColor: Colors.pink
),
BottomNavyBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
activeColor: Colors.blue
),
],
)
);
}
}
请注意,我刚刚更新了代码,以便在选择BottomNavyBarItem
时,它会在页面的Container
中以不同的颜色显示一个PageView
。