flutter - setstate后flutter_webview_plugin监听器(onHttpError)无法正常工作

Question

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

(要重现:wifi处于打开状态，我打开应用程序，加载了Webview。然后按Web View 上的某些按钮进行导航，但出现错误。现在，我连接互联网并按重新加载按钮，它可以正常工作并加载网站。那，我再次断开互联网连接，然后按一些按钮，这次错误没有出现，并转到网页不可用)

初始状态:

  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或打开应用程序内浏览器窗口，并具有许多事件，方法和选项来控制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。