Flutter底部导航栏回退逻辑异常：商品列表页返回直接触发退出提示

当前实现的核心问题在于：HomePage内部通过setState切换到商品列表页后，外层BottomBar的PopScope直接拦截了所有返回事件，没有给HomePage内部的页面切换逻辑留处理空间，导致按返回键时直接触发退出提示，而非先回到HomePage初始状态。

通过给HomePage绑定GlobalKey，让BottomBar能访问其内部状态，优先处理HomePage的页面回退逻辑，再执行首页的双击退出规则。

修改后的完整代码 #

BottomBar 代码 #

class _BottomBarState extends State<BottomBar> {
  // 定义GlobalKey用于访问HomePage的内部状态
  final GlobalKey<_HomePageState> _homePageKey = GlobalKey();
  
  final List<Widget> _pages = [
    HomePage(key: _homePageKey), // 绑定GlobalKey到HomePage
    const CartPage(),
    const SubscriptionList(),
    const ProfilePage(),
  ];

  DateTime? currentPress;

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: false,
      onPopInvoked: (didPop) async {
        if (widget.selectedIndex != 0) {
          // 当前不在首页，切回首页
          setState(() {
            widget.selectedIndex = 0;
          });
          return;
        } else {
          // 先检查HomePage是否处于商品列表页状态
          final homeState = _homePageKey.currentState;
          if (homeState != null && homeState.isClicked) {
            // 从商品列表页切回HomePage初始界面
            homeState.setState(() {
              homeState.isClicked = false;
            });
            return;
          }

          // 首页初始状态下，执行双击退出逻辑
          final now = DateTime.now();
          if (currentPress == null || now.difference(currentPress!) > const Duration(seconds: 2)) {
            currentPress = now;
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                elevation: 1,
                behavior: SnackBarBehavior.floating,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
                backgroundColor: Color(0xFF60B47B),
                content: Text('Press back again to exit', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w600)),
                duration: Duration(seconds: 1),
              ),
            );
            return;
          } else {
            SystemNavigator.pop();
          }
        }
      },
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Stack(
          children: [
            Positioned.fill(
              child: PageStorage(
                bucket: PageStorageBucket(),
                child: _pages[widget.selectedIndex],
              ),
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20.0),
                    topRight: Radius.circular(20.0),
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: Color.fromRGBO(0, 0, 0, 0.1),
                      spreadRadius: 2,
                      blurRadius: 1,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: BottomNavigationBar(
                  items: List.generate(4, (index) {
                    return BottomNavigationBarItem(
                      icon: Icon(
                        _selectedIcons[index],
                        color: widget.selectedIndex == index ? Colors.blue : Colors.grey.shade500,
                        size: 28.0,
                      ),
                      label: _getLabel(index),
                    );
                  }),
                  type: BottomNavigationBarType.fixed,
                  onTap: (value) {
                    setState(() {
                      widget.selectedIndex = value;
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

HomePage 代码 #

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 公开状态变量，允许BottomBar通过GlobalKey访问
  bool isClicked = false;

  @override
  Widget build(BuildContext context) {
    return isClicked ? const ProductListPage() : homePage();
  }

  Widget homePage() {
    return ElevatedButton(
      onPressed: () {
        setState(() {
          isClicked = !isClicked;
        });
      },
      child: const Text('Go to Product List'),
    );
  }
}

class ProductListPage extends StatefulWidget {
  const ProductListPage({super.key});

  @override
  State<ProductListPage> createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {
  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Product List'));
  }
}

核心修改点 #

1. GlobalKey绑定：给HomePage绑定GlobalKey，让BottomBar能直接访问其内部状态
2. 返回逻辑优先级：在BottomBar的返回拦截中，先判断HomePage是否处于商品列表页，优先执行内部页面回退
3. 双击退出触发条件：只有当HomePage处于初始状态时，才触发双击退出的提示逻辑

修改后的返回流程：

• 当前在其他底部导航页 → 切回首页
• 当前在首页商品列表页 → 切回首页初始界面
• 当前在首页初始界面 → 触发双击退出提示

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