想问一下一个关于flutter的问题,使用bottomNavigationBar实现底部导航栏的效果,但是底部导航栏的两个图标对应的界面是一样的,只是展示的数据不一样,怎么做到在点击底部导航栏时切换界面数据,我尝试在点击图标时传入参数,但是没有效果,界面展示的数据不会发生变化。
class MainPage extends StatefulWidget {
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
var _pageList;
var _appBarTitles = ['首页', '订单', '我的'];
var logic = Get.put(MainLogic());
var mainState = Get.find<MainLogic>().state;
List<BottomNavigationBarItem> _list;
final _pageController = PageController();
List<BottomNavigationBarItem> _buildBottomNavigationBarItem() {
if (_list == null) {
var _tabImages = [
[
const LoadAssetsImage('home/menu_home',
width: 25.0, color: Colours.unselected_item_color),
const LoadAssetsImage('home/menu_home',
width: 25.0, color: Colours.app_main)
],
[
const LoadAssetsImage('home/menu_order',
width: 25.0, color: Colours.unselected_item_color),
const LoadAssetsImage('home/menu_order',
width: 25.0, color: Colours.app_main)
],
[
const LoadAssetsImage('home/menu_mine',
width: 25.0, color: Colours.unselected_item_color),
const LoadAssetsImage('home/menu_mine',
width: 25.0, color: Colours.app_main)
],
];
_list = List.generate(3, (i) {
return BottomNavigationBarItem(
icon: _tabImages[i][0],
activeIcon: _tabImages[i][1],
label: _appBarTitles[i],
);
});
}
return _list;
}
@override
void initState() {
super.initState();
initData();
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Obx(() => BottomNavigationBar(
items: _buildBottomNavigationBarItem(),
currentIndex: mainState.index.value,
type: BottomNavigationBarType.fixed,
selectedItemColor: Colours.app_main,
unselectedItemColor: Colours.dark_unselected_item_color,
onTap: (index) =>
{logic.changeIndex(index), _pageController.jumpToPage(index)},
)),
body: PageView(
controller: _pageController,
children: _pageList,
onPageChanged: onPageChanged,
physics: NeverScrollableScrollPhysics(), // 禁止滑动
),
);
}
void initData() {
_pageList = [HomePage(), OrderPage(), MinePage()];
}
void onPageChanged(int index) {
print(index);
}
}