Flutter 如何使用 Getx 显示底部导航栏子页面答案

【问题标题】：Flutter How to show Bottom Navbar Sub Pages With GetxFlutter 如何使用 Getx 显示底部导航栏子页面
【发布时间】：2022-11-08 23:38:34
【问题描述】：

我正在使用底部导航栏，但无法在其他页面上显示。我正在使用getx。我没有为底部导航栏使用任何包！有5个项目，问题是；当我转到这些项目中的页面时，底部导航栏消失了。我应该遵循什么路径才能在其他子页面上显示它？

BOTTOMNAVBAR_VIEW

class BottomNavbarView extends BaseView<BottomNavbarController> {
  @override
  Widget vBuilder() => Scaffold(
        bottomNavigationBar: SizedBox(
          width: Get.width,
          height: 60.h,
          child: BottomNavigationBar(
              onTap: (index) {
                controller.tabChange(index);
              },
              unselectedLabelStyle: TextStyle(fontSize: 0),
              unselectedFontSize: 0,
              unselectedIconTheme: IconThemeData(
                size: Get.width > 390 ? 24.sp : 24.sp,
              ),
              selectedFontSize: 0,
              selectedIconTheme: IconThemeData(
                size: Get.width > 390 ? 24.sm : 24.sm,
              ),
              selectedLabelStyle: TextStyle(fontSize: 0),
              type: BottomNavigationBarType.fixed,
              landscapeLayout: BottomNavigationBarLandscapeLayout.spread,
              unselectedItemColor: Colors.black,
              selectedItemColor: Colors.orange,
              showSelectedLabels: false,
              showUnselectedLabels: false,
              currentIndex: controller.tabIndex.value,
              items: [
                _bottomNavbarItem(AppAssets.card_icon, ''),
                _bottomNavbarItem(AppAssets.key_icon, ''),
                _bottomNavbarItem(AppAssets.home_icon, ''),
                _bottomNavbarItem(AppAssets.doc_icon, ''),
                _bottomNavbarItem(AppAssets.menu_icon, ''),
              ]),
        ),
        body: IndexedStack(
          index: controller.tabIndex.value,
          children: [
            DashBoardView(),
            BlankView(),
            HomeView(),
            BlankView(),
            MenuView(),
          ],
        ),
      );
}

_bottomNavbarItem(String assetName, String label) {
  return BottomNavigationBarItem(
    icon: Image.asset(
      assetName,
      width: 24.w,
      height: 24.h,
      fit: BoxFit.contain,
    ),
    activeIcon: Container(
      height: 24.h,
      width: 24.w,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(width: 2, color: Colors.orange),
        ),
      ),
      child: Image.asset(assetName),
    ),
    label: label,
  );
}

BOTTOMNAVBAR_CONTROLLER

class BottomNavbarController extends BaseController {
  int current = 2;
  var tabIndex = 2.obs;

  tabChange(int index) {
    tabIndex.value = index;
    update();
  }

  @override
  void onInit() {
    super.onInit();
  }
}

BOTTOMNAVBAR_BINDING

class BottomNavbarBinding extends Bindings {
  @override
  void dependencies() {
    Get.put<BottomNavbarController>(BottomNavbarController());
    Get.lazyPut(() => HomeController());
    Get.lazyPut(() => BlankController());
    Get.lazyPut(() => CommonController());
    Get.lazyPut(() => DashBoardController());
    Get.lazyPut(() => MenuController());

  }
}

【问题讨论】：

标签： flutter flutter-getx

【解决方案1】：

您可以尝试通过构造函数传递控制器并访问该控制器值。

【讨论】：

【解决方案2】：

我有同样的问题这个答案对我有用， Bottom Navigation bar with back feature

我可能会迟到，但我希望它对你有好处

【讨论】：