Flutter实现含详情页的指定页面固定底部导航栏方案

我的Flutter移动端应用包含6个页面：EmploymentListPage、ClaimsPage、NotificationsPage、SettingsPage、EmploymentDetailsPage和EmploymentClaimsPage。其中前4个页面可通过底部导航栏切换；EmploymentDetailsPage从EmploymentListPage进入，EmploymentClaimsPage从EmploymentDetailsPage进入。当前仅前4个页面显示固定底部导航栏，希望另外两个页面也显示该导航栏，请问如何实现？

以下是当前包含底部导航栏的homePage.dart代码：

import 'package:apex_salary_packaging/screens/claimsPage.dart';
import 'package:apex_salary_packaging/screens/employmentListPage.dart';
import 'package:apex_salary_packaging/screens/notificationPage.dart';
import 'package:apex_salary_packaging/screens/settingsPage.dart';
import 'package:apex_salary_packaging/services/pushNotificationService.dart';
import 'package:apex_salary_packaging/services/serviceLocator.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
  final PushNotificationService? pushNotificationService =
      locator<PushNotificationService>();

  int index = 0;
  String errorMessage = "";
  bool? showErrorMessage = false;
  int pushNotificationCount = 0;
  int selectedIndex = 0;

  var pages = <Widget>[
    EmploymentListPage(),
    ClaimsPage(),
    NotificationsPage(),
    SettingsPage()
  ];

  @override
  void initState() {
    super.initState();
    onLoadUnAcknowledgedCount();
    WidgetsBinding.instance!.addObserver(this);
    pushNotificationService!.onCountChange.listen(onNotificationCountChange);
    pushNotificationService!.onSelectedPageChange.listen(onPageChange);
    pushNotificationService!.checkForInitialMessage();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.resumed) {
      onLoadUnAcknowledgedCount();
    }
  }

  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: pages.elementAt(selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: selectedIndex,
        onTap: onItemTapped,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            activeIcon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.add_circle_rounded,
            ),
            activeIcon: Icon(Icons.add_circle_rounded),
            label: 'Claims',
          ),
          BottomNavigationBarItem(
            label: 'Notifications',
            icon: Stack(
              children: <Widget>[
                Icon(Icons.notifications),
                Visibility(
                  visible: pushNotificationCount > 0,
                  child: Positioned(
                    right: 0,
                    child: Container(
                      padding: EdgeInsets.all(1),
                      decoration: BoxDecoration(
                        color: Colors.red[900],
                        borderRadius: BorderRadius.circular(6),
                      ),
                      constraints: BoxConstraints(
                        minWidth: 12,
                        minHeight: 12,
                      ),
                      child: Text(
                        pushNotificationCount.toString(),
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 10,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }

  onItemTapped(index) {
    setState(() {
      this.selectedIndex = index;
    });
  }

  onNotificationCountChange(dynamic eventData) {
    this.onLoadUnAcknowledgedCount();
  }

  onPageChange(event) {
    if (this.mounted) {
      setState(() {
        selectedIndex = event;
      });
    }
  }

  onLoadUnAcknowledgedCount() async {
    if (this.mounted) {
      int count = await pushNotificationService!.onLoadNotificationCount();
      setState(() {
        pushNotificationCount = count;
      });
    }
  }
}

核心逻辑是将所有需要显示底部导航栏的页面纳入HomePage的状态管理中，避免使用Navigator.push跳转到独立页面（独立页面无法共享HomePage的底部导航栏）。具体步骤如下：

1. 导入新增页面 #

在homePage.dart顶部添加两个新增页面的导入：

import 'package:apex_salary_packaging/screens/employmentDetailsPage.dart';
import 'package:apex_salary_packaging/screens/employmentClaimsPage.dart';

2. 扩展状态变量 #

在_HomePageState中添加状态变量，用于记录详情页/索赔页的参数和当前页面层级：

// 新增状态变量：记录选中的就业ID，以及是否处于详情/索赔页面
int? selectedEmploymentId;
bool isInDetailsPage = false;
bool isInClaimsPage = false;

3. 修改页面渲染逻辑 #

替换Scaffold的body部分，根据当前状态渲染对应的页面：

body: () {
  // 优先渲染索赔页，其次是详情页，最后是底部导航对应的主页面
  if (isInClaimsPage) {
    return EmploymentClaimsPage(
      employmentId: selectedEmploymentId,
      // 自定义返回回调，用于更新HomePage状态
      onBack: () {
        setState(() {
          isInClaimsPage = false;
        });
      },
    );
  } else if (isInDetailsPage) {
    return EmploymentDetailsPage(
      employmentId: selectedEmploymentId,
      // 跳转到索赔页的回调
      onViewClaims: (id) {
        setState(() {
          selectedEmploymentId = id;
          isInClaimsPage = true;
        });
      },
      // 返回列表页的回调
      onBack: () {
        setState(() {
          isInDetailsPage = false;
        });
      },
    );
  } else {
    return pages.elementAt(selectedIndex);
  }
}(),

4. 更新EmploymentListPage的跳转逻辑 #

修改EmploymentListPage的构造函数，添加回调函数用于通知HomePage切换到详情页：

// EmploymentListPage的构造函数
class EmploymentListPage extends StatelessWidget {
  final Function(int) onSelectEmployment; // 新增回调

  const EmploymentListPage({required this.onSelectEmployment, Key? key}) : super(key: key);

  // ... 其他代码

  // 点击列表条目时调用回调
  onTap: () {
    widget.onSelectEmployment(employment.id);
  },
}

然后在HomePage的pages列表中传递该回调：

var pages = <Widget>[
  EmploymentListPage(
    onSelectEmployment: (id) {
      setState(() {
        selectedEmploymentId = id;
        isInDetailsPage = true;
      });
    },
  ),
  ClaimsPage(),
  NotificationsPage(),
  SettingsPage()
];

5. 处理底部导航栏的交互 #

确保点击底部导航栏时，退出详情/索赔页面，回到主页面层级：

onItemTapped(index) {
  setState(() {
    selectedIndex = index;
    // 点击底部导航时重置页面层级
    isInDetailsPage = false;
    isInClaimsPage = false;
  });
}

6. 优化页面返回按钮 #

在EmploymentDetailsPage和EmploymentClaimsPage中，使用自定义返回按钮替代系统默认的返回逻辑，确保状态同步：

// EmploymentDetailsPage的AppBar
AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: widget.onBack, // 使用自定义回调
  ),
  title: Text("Employment Details"),
),

// EmploymentClaimsPage的AppBar
AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: widget.onBack, // 使用自定义回调
  ),
  title: Text("Employment Claims"),
),

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