Flutter（进阶）GetX+BottomNavigationBar实现首页底部导航

GetX是什么？

关于GetX是什么，git上面有官方文档，GetX，
这里有一篇详细介绍GetX使用详解，GetX使用详解

无意间发现GetX

由于flutter2的发布，感觉还是有必要去了解flutter了，最近也是打算系统学习flutter，之前也是有过打算，基本没付诸行动，当我在看状态管理provider相关知识时，无意间发现了GetX这一神器，所以就打算把之前写的首页底部导航，部分功能使用GetX改造一番。当我升级了flutter sdk到最新版后，在控制台敲入flutter run 直接跑在了浏览器上，当时很惊讶，因为之前弄过一次是跑在手机上的，所以当时就决定是应该系统学习flutter，或许真的可以多一些机会。

install GetX

进入https://pub.dev/，直接搜索Getx, 然后Pub get

dependencies:
  get: ^3.26.0

具体实现

1，新建MainState,我自己把它认为状态管理，有点像android原生中的ViewModel，

class MainState {
  RxInt index;

  MainState() {
    index = 0.obs;
  }
}

2，新建MainLogic这里主要是进行逻辑控制，这里的使用我主要是借鉴上面文章当中提到的方案，如果觉得不了解，可以先认真读一下上面我给出的借鉴文章。

class MainLogic extends GetxController {
  MainState state = MainState();

   changeIndex(int index) {
    state.index.value = index;
  }
}

3，进行首页MainPage的编写

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

总结

关于首页onPageChanged方法，主要是考虑页面切换时，可以顺便做一些逻辑处理，在整个首页tab切换过程中，是真的体会到了GetX的轻量和方便，由于我也是刚刚学习，如果有什么问题，欢迎留言讨论。