flutter ProvideMulti多个状态同时使用

上一章，我们简单讲了 flutter Provide状态管理的简单使用。那种方法只适用于同时只使用一个状态的情况，如果使用多个，就不行了。得借助Widget ProvideMulti。

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]
);

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！