Flutter Bottom Navigation Bar返回按钮异常：首页无法通过返回键退出

问题描述 #

在模拟器中，处于My Ads或Friends页面时，按下返回键应用会回到Home页面（符合预期）；但在Home页面时，按下返回键会不断重复返回Home页面，无法通过返回键退出应用。

问题分析 #

当前代码中WillPopScope的onWillPop回调逻辑存在问题：无论当前选中的是哪个页面，都会强制将选中索引设为0并调用_onItemTapped(0)跳转到Home页面，最后返回false阻止系统默认的返回行为。这就导致在Home页面按下返回键时，不仅不会触发应用退出，反而会再次跳转回Home页面，形成循环。

修复方案 #

修改onWillPop的逻辑，判断当前是否已经处于Home页面（即widget.selectedIndex == 0）：

• 如果是Home页面，返回true让系统执行默认的退出操作；
• 如果是其他页面，执行跳转到Home的逻辑并返回false阻止默认返回行为。

修改后的完整代码如下：

class BottomNavigation extends StatefulWidget {
  int selectedIndex;
  final void Function(int index)? onTap;
  BottomNavigation({
    super.key,
    required this.selectedIndex,
    this.onTap,
  });

  @override
  State<BottomNavigation> createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  String _getPage(int index) {
    switch (index) {
      case 0:
        return "/";
      case 1:
        return "/myads";
      case 2:
        return "/friends";
      default:
        return "/";
    }
  }


  void _onItemTapped(int index) {
    if (index == 0) {
      setState(() {
        widget.selectedIndex = 0;
      });
      Navigator.pushReplacementNamed(context, "/");
    } else {
      setState(() {
        widget.selectedIndex = index;
        Navigator.pushNamed(context, _getPage(index));
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (widget.selectedIndex == 0) {
          // 当前在Home页面，允许系统退出应用
          return true;
        } else {
          // 当前在其他页面，跳转到Home并阻止默认返回
          setState(() {
            widget.selectedIndex = 0;
          });
          _onItemTapped(0); 
          return false; 
        }
      },
      child: ClipRRect(
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(32.0),
          topRight: Radius.circular(32.0),
        ),
        child: BottomNavigationBar(
          backgroundColor: primaryPurpleColor,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 8, bottom: 5),
                child: Icon(
                  Icons.home_filled,
                  size: 35,
                ),
              ),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 8, bottom: 5),
                child: Icon(
                  Icons.pets,
                  size: 35,
                ),
              ),
              label: 'My Ads',
            ),
            BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 8, bottom: 5),
                child: Icon(
                  Icons.people_alt,
                  size: 35,
                ),
              ),
              label: 'Friends',
            )
          ],
          currentIndex: widget.selectedIndex,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

额外优化建议 #

从其他页面返回Home时，使用Navigator.popUntil替代pushReplacementNamed能更合理地维护导航栈，避免栈中积累过多Home页面实例：

void _onItemTapped(int index) {
  setState(() {
    widget.selectedIndex = index;
  });
  if (index == 0) {
    // 回到Home页面，清空栈中直到Home的路由
    Navigator.popUntil(context, ModalRoute.withName("/"));
  } else {
    Navigator.pushNamed(context, _getPage(index));
  }
}

这样既可以确保回到Home页面，又能保持导航栈的整洁，避免不必要的路由堆积。

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