Flutter GetX BottomNavigationBar 实现底部导航栏

Flutter GetX BottomNavigationBar 实现底部导航栏

其实写了好久的Flutter的项目，感觉Provider状态管理和Fluro路由管理， 用起来总是感觉不是那么的舒服，现在还记得刚接触Flutter的时候是1.*版本， 很早那时候还不知道什么是状态管理， 一个父子子的功能套了好多State的套来套去，其实从前端转过来接触Flutter的同学一定都是这个样子大家都知道有Provider到底怎么用，就几个人能说明白的，网上能找到的寥寥无几的几个例子，理解起来让人头大，好几次都是觉得不同套来套去的好虽然恶心，但是可以理解，后来没办法硬着头对原有项目进行升级，算是明白了到底怎么回事， 但是我觉对于新人来说还是不那么友好至少没有做Android开发的新人，最近闲来无事给公司的记账App改造一下，想着是不是能有一些替代状态管理和路由管理的解决方案，阴差阳错的发现了GetX,就一下子爱了，啰嗦了半天终于扣题了哈哈。

GetX ^4.6.6

本文不在这里讲解GetX基础知识，有需要的小伙伴可以访问Flutter GetX使用—简洁的魅力!,这也是官方推荐，讲很详细

主要介绍一下，是现在BottomNavigationBar的时候遇到小问题,废话不多说。

首先使用GetX的插件生成

HomeView HomeLogic HomeState HomeBinding

DashboardView DashboardLogic DashboardState DashboardBinding

ContractView ContractLogic ContractState ContractBiding

UserView UserLogic UserState UserBinding 

home

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  final logic = Get.find<HomeLogic>();
  final state = Get.find<HomeLogic>().state;
  
  List<Widget> bodyPageList = [DashboardPage(), ContractPage(), UserPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(() => IndexedStack(
            index: state.selectedIndex.value,
            children: bodyPageList,
          )),
      bottomNavigationBar: Obx(
        () => BottomNavigationBar(
          currentIndex: state.selectedIndex.value,
          onTap: logic.changeBottomBarIndex,
          type: BottomNavigationBarType.fixed,
          items: const [
            BottomNavigationBarItem(
                icon: Icon(Icons.dashboard), label: 'Dashboard'),
            BottomNavigationBarItem(icon: Icon(Icons.gavel), label: 'Contract'),
            BottomNavigationBarItem(
                icon: Icon(Icons.account_box_rounded), label: 'User'),
          ],
        ),
      ),
    );
  }
}

Dashboard

class DashboardPage extends StatelessWidget {
  const DashboardPage({Key? key}) : super(key: key);
    @override
  Widget build(BuildContext context) {
    final logic = Get.find<DashboardLogic>();
    final state = Get.find<DashboardLogic>().state;
    return Scaffold(
       body:Center(child:Text('Dashboard')));
  }
}

class DashboardLogic extends GetxController {
  final DashboardState state = DashboardState();
}

class DashboardState {
  DashboardState() {
    ///Initialize variables
  }
}

class DashboardBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => DashboardLogic());
  }
}

…

其他页面不一一举例了，当运行项目的时候会提示

"DashboardLogic" not found. You need to call "Get.put(DashboardLogic())" or "Get.lazyPut(()=>DashboardLogic())"

说明没有将logic添加到Get上下文中，慌了一批，主要是github上面的例子是GetX 5.*版本，和现在有写法上的出入，研究了一下，进入到自己的懵逼世界钻了牛角尖不能自拔，越走越远…冥思苦想看源码

其实很好理解，就是将没有加载的XXXBinding的方法加载就行啦，那登录的页面跳转到哪个页面呢？是home页面，GetPage()加载了homeBinding，同时也是可以加载其他页面的bing，哇解决了

    GetPage(
      name: _Paths.home,
      page: () => HomePage(),
      bindings: [
        HomeBinding(),
        DashboardBinding(),
        ContractBinding(),
        UserBinding()
      ],
    ),

回头看了就是傻了一批，还是基础理论理解有问题，对于提出的Mvvm的理解还是不够深刻，造成了不必要麻烦，本文献给初学者，但是5.0以后写法会有大改进，期待稳定版发布