[移动开发]flutter 进阶 getx 底部 BottomNavigationBar 封装

1、创建全局状态管理类

/**
 * 全局状态变量代码
 */
class MainState{

  // 底部导航栏索引
  RxInt bottomBarIndex = 0.obs;

}

2、创建全局状态控制器

/**
 * 全局状态控制器
 */
class GlobalStateController extends GetxController {
  // 初始化全局状态变量代码
 final MainState mainState = MainState();

  // 改变底部状态栏索引
  changeBottomBarIndex(int index) {
    mainState.bottomBarIndex.value = index;
  }
}

3、实现底部BottomNavigationBar

class BottomNavBar extends StatelessWidget {

  // 初始化全局状态控制器
  final GlobalStateController globalStateController =
      Get.put(GlobalStateController());
  var mainState = Get.find<GlobalStateController>().mainState;

  List pages = [HomeView(), MyView()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(() => pages[mainState.bottomBarIndex.value]),
      bottomNavigationBar: Obx(
        () => BottomNavigationBar(
          //  设置当前选中下标
          currentIndex: mainState.bottomBarIndex.value,
          onTap: (index) {
            //  点击事件，获取当前下标索引
            globalStateController.changeBottomBarIndex(index);
          },
          type: BottomNavigationBarType.fixed,
          iconSize: 30,
          fixedColor: Colors.blue,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "我的"),
          ],
        ),
      ),
    );
  }
}

6、调用 navigationBar

 @override
  Widget build(BuildContext context) {
    return BottomNavBar();
  }