Flutter中WebView结合PopScope处理返回键出现黑屏问题求助

云上老周

2026-6-14

问题解决：WebView返回键逻辑修复及黑屏问题处理

问题根源

你的代码出现黑屏的核心原因：

SystemNavigator.pop()会直接尝试退出当前路由/应用，但WebView所在的Page3是嵌套在IndexedStack中的页面，并非独立路由，调用该方法会导致页面状态异常。
PopScope的canPop设为true时，系统会优先执行默认的pop行为，干扰自定义返回逻辑。

修复方案

修改WebView页面的PopScope配置，替换错误的退出逻辑为切换到底部导航首页：

@override
Widget build(BuildContext context) {
  return PopScope(
    // 设为false，禁止系统默认pop行为，完全自定义返回逻辑
    canPop: false,
    onPopInvokedWithResult: (didPop, result) async {
      if (await controller.canGoBack()) {
        // WebView可返回时，退回到上一网页
        await controller.goBack();
      } else {
        // WebView无法返回时，切换到底部导航首页（索引0）
        Get.find<BottomNavbarController>().updateIndex(0);
      }
    },
    child: Scaffold(
      backgroundColor: const Color(0xFF000000),
      body: Padding(
        padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).size.height * 0.01),
        child: SafeArea(
          child: WebViewWidget(
            controller: controller,
          ),
        ),
      ),
    ),
  );
}

关键说明

canPop: false：阻止系统自动执行pop操作，确保自定义逻辑完全接管返回键行为。
切换首页逻辑：通过Get.find<BottomNavbarController>()获取底部导航控制器，调用updateIndex(0)直接切换到Page1，符合需求。
避免黑屏：不再使用SystemNavigator.pop()，而是通过修改底部导航索引切换页面，保持页面栈正常状态。