1、添加依赖不说了,上一章可以查看。这里,我们先简单描述下希望实现的效果,即,BottomNavigationBar有四个,但和它对应的页面只有三个,点击第二个 BottomNavigationBarItem,实际上不会切换页面,而是弹出一个弹窗,这时,我们需要给状态多加个控制显示第几个tab页的 showIndex,所以我们改造 bottom_navigation_bar_index.dart
import 'package:flutter/material.dart'; class BottomNavigationBarIndex with ChangeNotifier{ //用来控制当前BottomNavigationBarItem的高亮 int currentIndex = 0; //用来显示对应的页面 int showIndex = 0; //修改 currentIndex void changeIndex(int idx){ this.currentIndex = idx; notifyListeners(); } //修改 showIndex void changeShowIndex(int idx){ this.showIndex = idx; notifyListeners(); } }2、新建个状态管理文件is_show_add_page.dart,用它来显示隐藏第二个 BottomNavigationBarItem点击时的弹窗
import 'package:flutter/material.dart'; class IsShowAddPage extends ChangeNotifier{ bool isShowAddPage = false; void showHideAddPage(bool flag){ this.isShowAddPage = flag; notifyListeners(); } }3、main.dart加入 showIndex 的状态
//状态管理 import 'package:provide/provide.dart'; import './provide/bottom_navigation_bar_index.dart'; import './provide/is_show_add_page.dart'; void main(){ //状态管理provide注入 var providers = Providers(); providers..provide(Provider<BottomNavigationBarIndex>.value(BottomNavigationBarIndex())) ..provide(Provider<IsShowAddPage>.value(IsShowAddPage())); runApp(ProviderNode( child:MyApp(), providers: providers, ) ); }4、使用 ProvideMulti 同时管理多个状态
//状态管理provide return ProvideMulti( builder: (context,child,model){ return Scaffold( bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, //currentIndex从状态管理中心获取 currentIndex: model.get<BottomNavigationBarIndex>().currentIndex, items: _bottomTabs(), onTap: (index){ switch(index){ case 0: model.get<BottomNavigationBarIndex>().changeShowIndex(0); break; case 1: //调用IsShowAddPage状态中的showHideAddPage方法,来显示弹窗 model.get<IsShowAddPage>().showHideAddPage(true); break; case 2: model.get<BottomNavigationBarIndex>().changeShowIndex(1); break; case 3: model.get<BottomNavigationBarIndex>().changeShowIndex(2); break; } model.get<BottomNavigationBarIndex>().changeIndex(index); }, unselectedItemColor: Color.fromRGBO(160, 160, 160, 1), selectedItemColor: Color.fromRGBO(33, 139, 219, 1), unselectedFontSize: ScreenUtil().setSp(20), selectedFontSize: ScreenUtil().setSp(20), ), body: IndexedStack( //showIndex也从状态管理中心获取 index: model.get<BottomNavigationBarIndex>().showIndex, //这里只有三个tab页,但BottomNavigationBarItem有四个,所以需要单独定义showIndex来显示对应的tab页 children:[ HomePage(), MessagePage(), MinePage() ], ), ); }, //这里指定了有哪几个状态 requestedValues: [BottomNavigationBarIndex, IsShowAddPage] );