Flutter开发中如何实现底部导航栏不在所有页面显示

你只需要新增一个控制底部导航栏显隐的可观察变量，再根据当前路由状态判断显隐即可，修改代码如下：

步骤1：修改home_controller.dart #

新增hideBottomNav可观察变量，在生成路由时根据路由名称更新该变量状态：

import 'package:fauna/app/modules/invite_code/invite_code_binding.dart';
import 'package:fauna/app/modules/invite_code/invite_code_view.dart';
import 'package:fauna/app/modules/pet_details/pet_details_binding.dart';
import 'package:fauna/app/modules/pet_details/pet_details_view.dart';
import 'package:fauna/app/modules/vet_profile/vet_profile_binding.dart';
import 'package:fauna/app/modules/vet_profile/vet_profile_view.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class HomeController extends GetxController {
  late BuildContext context;

  static HomeController get to => Get.find();
  var currentIndex = 0.obs;
  final pages = <String>['/pet-details', '/vet-profile'];
  var count = 0.obs;
  // 新增：控制底部导航显隐的可观察变量
  var hideBottomNav = false.obs;

  void changePage(int index) {
    currentIndex.value = index;
    Get.toNamed(pages[index], id: 1);
  }

  Route? onGenerateRoute(RouteSettings settings) {
    if (settings.name == '/invite-code') {
      // 邀请码页隐藏底部导航
      hideBottomNav.value = true;
      return GetPageRoute(
        settings: settings,
        page: () => InviteCodeView(),
        binding: InviteCodeBinding(),
      );
    }

    if (settings.name == '/pet-details') {
      // 业务页显示底部导航
      hideBottomNav.value = false;
      return GetPageRoute(
        settings: settings,
        page: () => PetDetailsView(),
        binding: PetDetailsBinding(),
      );
    }

    if (settings.name == '/vet-profile') {
      // 业务页显示底部导航
      hideBottomNav.value = false;
      return GetPageRoute(
        settings: settings,
        page: () => VetProfileView(),
        binding: VetProfileBinding(),
      );
    }
    return null;
  }
}

步骤2：修改home_view.dart #

根据hideBottomNav的状态判断是否渲染底部导航栏：

import 'package:fauna/app/styles/colors.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';

import 'home_view_model.dart';

class HomeView extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: Get.nestedKey(1),
        initialRoute: '/invite-code',
        onGenerateRoute: controller.onGenerateRoute,
      ),
      // 修改：根据状态判断是否显示底部导航
      bottomNavigationBar: Obx(() => controller.hideBottomNav.value 
          ? const SizedBox.shrink() 
          : BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(
                  FontAwesomeIcons.baby,
                  color: vaccineValid,
                  size: 15,
                ),
                label: 'Pet details',
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  FontAwesomeIcons.airbnb,
                  color: vaccineValid,
                  size: 15,
                ),
                label: 'Vet profile',
              ),
            ],
            currentIndex: controller.currentIndex.value,
            selectedItemColor: Colors.green,
            onTap: controller.changePage,
          )),
    );
  }
}

注：新版Flutter中BottomNavigationBarItem的title参数已废弃，推荐替换为label参数，上述代码已同步修正。
如果你的业务逻辑允许用户从业务页返回邀请码页，需要额外在路由POP的生命周期回调里同步更新hideBottomNav的状态，常规业务中邀请码验证后不允许回退的场景下，上述代码即可正常运行。

内容的提问来源于stack exchange，提问作者Igor Lopatchin