You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter WebView应用物理返回键点击崩溃,实现返回上一页功能遇阻求助

解决Flutter WebView物理返回键崩溃问题

看起来你遇到的崩溃问题主要是因为错误的返回键处理逻辑和未正确引用WebViewController导致的,我来帮你修正代码:

问题分析

  1. Flutter中不能直接重写onBackPressed(这是Android原生Activity的方法),需要用Flutter的WillPopScope组件来拦截返回事件。
  2. 你代码里的webView变量根本没定义,直接调用webView.canGoBack()会导致空指针异常,这就是崩溃的直接原因。

修正后的完整代码

import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewApp extends StatefulWidget {
  @override
  _WebViewAppState createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  final Completer<WebViewController> _controller = Completer<WebViewController>();
  double opacity = 0.0;

  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    // 使用WillPopScope拦截物理返回键事件
    return WillPopScope(
      onWillPop: () async {
        final WebViewController controller = await _controller.future;
        // 判断WebView是否可以返回上一页
        if (await controller.canGoBack()) {
          controller.goBack();
          return false; // 阻止默认的返回行为(关闭页面)
        } else {
          return true; // 允许默认返回,关闭当前页面
        }
      },
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          toolbarHeight: 1,
        ),
        body: Opacity(
          opacity: opacity,
          child: WebView(
            initialUrl: 'https://google.com',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController controller) {
              _controller.complete(controller);
            },
            onPageFinished: (_) {
              setState(() {
                opacity = 1.0;
              });
            },
          ),
        ),
      ),
    );
  }
}

关键修改点

  • 添加WillPopScope:这个组件专门用来处理物理返回键事件,onWillPop回调返回false表示拦截返回,true表示允许默认行为。
  • 正确获取WebViewController:通过_controller.future拿到初始化完成的WebViewController,然后调用canGoBack()和goBack()方法,避免空指针。
  • 移除错误的onBackPressed方法:Flutter的State类没有这个方法,之前的写法完全错误。

这样修改后,点击物理返回键时,WebView会先尝试返回上一页,只有当WebView没有历史页面时,才会关闭当前Flutter页面,不会再崩溃了。

内容的提问来源于stack exchange,提问作者Smartak

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.06 06:53:42