Flutter跳转VesselScreen时缺失AppBar和BottomNavigationBar的解决方法

我在home_screen.dart中实现了包含5个选项的bottomNavigationBar，点击第二个标签（Icons.directions_boat_filled）时，页面能正常显示HomeScreen的AppBar和底部导航栏。但通过home_main.dart中的GestureDetector按钮使用Get.to()跳转到vessel_screen.dart时，新页面只显示自身的TabBar，丢失了HomeScreen的顶部AppBar和底部导航栏。

问题原因 #

Get.to()会将VesselScreen作为全新的路由页面推入导航栈，这个页面的Scaffold仅包含自身的TabBar组件；而HomeScreen的顶部AppBar和底部导航栏属于父页面的Scaffold，不会跟随新路由页面一同显示。点击底部导航栏时，只是切换HomeScreen的body内容，并未跳转新页面，因此能保留父页面的导航组件。

解决方案：切换导航索引而非跳转新页面 #

既然VesselScreen已经是HomeScreen底部导航的目标页面之一，我们只需要在点击按钮时触发底部导航的索引切换，而非跳转新页面。以下提供两种实现方式：

方式一：使用GetX状态管理（推荐）

1. 创建底部导航控制器

// bottom_nav_controller.dart
import 'package:get/get.dart';

class BottomNavController extends GetxController {
  final selectedIndex = 0.obs;

  void changeIndex(int index) {
    selectedIndex.value = index;
  }
}

2. 修改HomeScreen使用控制器管理索引

// home_screen.dart
import 'package:shipda/controllers/bottom_nav_controller.dart';

class _HomeScreenState extends State<HomeScreen> {
  // ... 保留原有其他代码

  final BottomNavController navController = Get.put(BottomNavController());

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          appBar: AppBar(
            title: Text(
              '쉽다로고',
              style: TextStyle(color: baseColor50),
            ),
            backgroundColor: baseColor10,
            elevation: 0.0,
          ),
          body: SafeArea(
            child: _widgetOptions.elementAt(navController.selectedIndex.value),
          ),
          bottomNavigationBar: BottomNavigationBar(
            selectedItemColor: primaryColor50,
            currentIndex: navController.selectedIndex.value,
            onTap: navController.changeIndex,
            type: BottomNavigationBarType.fixed,
            items: [
              // ... 保留原有导航项代码
            ],
          ),
        ));
  }
}

3. 修改home_main.dart的点击事件

// home_main.dart
import 'package:shipda/controllers/bottom_nav_controller.dart';

// ... 在GestureDetector中替换onTap逻辑
GestureDetector(
  onTap: () {
    Get.find<BottomNavController>().changeIndex(1);
  },
  child: Container(
    // ... 保留原有容器代码
  ),
),

方式二：使用回调函数（无需状态管理库）

1. 修改HomeMain的构造函数，添加回调参数

// home_main.dart
class HomeMain extends StatelessWidget {
  final VoidCallback onVesselTap;
  const HomeMain({Key? key, required this.onVesselTap}) : super(key: key);

  // ... 保留原有其他代码
}

2. 在HomeScreen中传入回调

// home_screen.dart
final List<Widget> _widgetOptions = <Widget>[
  HomeMain(onVesselTap: () => _onItemTapped(1)),
  VesselScreen(),
  LicenseScreen(),
  PartsScreen(),
  TabBarScreen(),
];

3. 修改home_main.dart的点击事件

// home_main.dart
GestureDetector(
  onTap: onVesselTap,
  child: Container(
    // ... 保留原有容器代码
  ),
),

效果说明 #

两种方式都会让按钮点击行为和底部导航栏点击行为保持一致：切换HomeScreen的body内容为VesselScreen，同时保留HomeScreen的顶部AppBar和底部导航栏。

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