Flutter 使用Getx 构建底部导航bottomNavigationBar

第一步：配置文件引入getx

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  get: ^4.1.4

第二步：修改main()方法，并设置根节点组件

void main() {
  runApp(GetMaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BootomNvPage();//底部导航组件
  }
}

第三步：全局状态变量代码

class MainState {
  //底部导航栏索引
  RxInt bottombar_index = 0.obs;
}

第四步：全局状态控制器代码

//全局状态控制器
class GlobalStateController extends GetxController {
  MainState state = MainState();
  //改变底部导航栏索引
  changeBottomBarIndex(int index) {
    state.bottombar_index.value = index;
    print(state.bottombar_index.value);
  }
}

第五步：底部导航组件页面完整代码

class BootomNvPage extends StatelessWidget {
  //全局状态控制器
  final globalStateController = Get.put(GlobalStateController());
  var mainState = Get.find().state;

  List bodyPageList = [
    HomePage(),
    InfoPage(),
    MyPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //主题
        body: Obx(() =>bodyPageList[mainState.bottombar_index.value]),
        //底部导航条
        bottomNavigationBar: Obx(() => BottomNavigationBar(
              // 当前菜单下标
              currentIndex: mainState.bottombar_index.value,
              // 点击事件,获取当前点击的标签下标
              onTap: (int index) {
                globalStateController.changeBottomBarIndex(index);
              },
              iconSize: 30.0,
              fixedColor: Colors.red,
              type: BottomNavigationBarType.fixed,
              items: [
                BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
                BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
                BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置")
              ],
            )));
  }
}

运行结果

运行截图