flutter_webview_plugin 侦听器 (onHttpError) 在设置状态后不工作

Question

我使用了 flutter_webview_plugin 并且正在更改屏幕以显示错误消息和使用 setState 的重新加载按钮（此按钮适用于由 a 设置的标志 errorState onHttpError 听众）。当错误发生时，它会工作并显示错误消息，但当同样的错误再次发生时，侦听器不会检测到错误。

（要重现：wifi 已打开，我打开应用程序，webview 加载。然后我在 web 视图上按某个按钮进行导航，但出现错误。现在我连接互联网并按重新加载按钮它可以工作并且加载网站。之后，我再次断开互联网并按某个按钮，这次错误没有出现并转到网页不可用）

初始状态：

  void initState() {
    _onHttpError = flutterWebviewPlugin.onHttpError.listen(
      (WebViewHttpError error) => {
        print("ERROR Listener" + error.toString()),
        setState(() {
          errorState = true;
        }),
        print("error state on listen: $errorState")
      },
    );
    super.initState();
  }

onReload 方法：

  void _onReload() async {
    Future<ApiResponse> apiResponse =
        fetchData(widget._username, widget._password);
    var response = await apiResponse;

    print("API RESPONSE =  status: " +
        response.status.toString() +
        ", message: " +
        response.message.toString());

    if (response.status == "true") {
      setState(() {
        flutterWebviewPlugin.reload();        
        errorState = false;
      });
    } else {
      setState(() {
        errorState = true;
      });
    }
    print("error state on reload: $errorState");
  }

构建方法：

  Widget build(BuildContext context) {
    print("error state on build: $errorState");
    return SafeArea(
      child: errorState
          ? Scaffold(
              body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      "No Internet, Please try again.",
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                  RaisedButton(
                    onPressed: () {
                      _onReload();
                    },
                    child: Text("Reload"),
                  )
                ],
              ),
            ))
          : WebviewScaffold(
              url: url,
            ),

    );
  }
}

Answer 1

你可以试试我的插件flutter_inappwebview，这是一个 Flutter 插件，允许你添加内联 WebView 或打开应用内浏览器window，并且有很多事件、方法和控制 WebView 的选项。

它有onLoadError和onLoadHttpError等事件：

onLoadError：当 WebView 在加载 url.
onLoadHttpError: 当 WebView 主页面收到 HTTP 错误时触发的事件。

这是一个简单的例子：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController webView;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                  child: InAppWebView(
                    initialUrl: "https://github.com/flutter",
                    initialHeaders: {},
                    initialOptions: InAppWebViewGroupOptions(
                      crossPlatform: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                    onLoadError: (controller, url, code, message) {
                      print(code);
                      print(message);
                    },
                    onLoadHttpError: (controller, url, statusCode, description) {
                      print(statusCode);
                      print(description);
                    },
                  ))
            ])),
      ),
    );
  }
}

如果您收到 HTTP 错误，将触发 onLoadHttpError 并打印 HTTP 错误的 statusCode 和 description。

flutter_webview_plugin 侦听器 (onHttpError) 在设置状态后不工作

flutter_webview_plugin listener (onHttpError) not working after setstate

webview

dart

flutter