如何将WebViewWidget和WillPopScope结合在一起

Question

如何在 Flutter 中将 WillPopScope 与 WebViewWidget 一起使用？我只找到了 WebView 的示例。使用 WillPopScope 我需要这样，当按下后退按钮时，它会返回到页面 https://www.example.com，即 webview 的主页。

这是我目前的代码：

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

void main() => runApp(MaterialApp(home: WebViewExample()));

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  bool showErrorPage = false;

  WebViewController controller = WebViewController();

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

    controller.setNavigationDelegate(NavigationDelegate(
      onWebResourceError: (WebResourceError error) {
        setState(() {
          showErrorPage = true;
        });
      },
    ));

    controller.setJavaScriptMode(JavaScriptMode.unrestricted);

    controller.loadRequest(Uri.parse("https://www.example.com"));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: showErrorPage 
      ? const Center(
        child: Text('Error!'),
        style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold)),
      )
      : WebViewWidget (
        controller: controller,
      )
    );
  }
}

Answer 1

试试这个方法

  @override
  Widget build(BuildContext context) {
    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://www.example.com/'));
    return Scaffold(
      body: showErrorPage 
      ? const Center(
        child: Text('Error!'),
        style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold)),
      )
      : WillPopScope(
        onWillPop: () => _goBack(context),
        child: WebViewWidget(
          controller: controller,
        ),
      ),
    );
  }

  Future<bool> _goBack(BuildContext context) async {
    if (await controller.canGoBack()) {
      controller.goBack();
      return Future.value(false);
    } else {
      if (context.mounted) {
        showDialog(
            context: context,
            builder: (context) => AlertDialog(
                  title: const Text('Do you want to close the app?'),
                  actions: <Widget>[
                    MaterialButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: const Text('No'),
                    ),
                    MaterialButton(
                      onPressed: () {
                        SystemNavigator.pop();
                      },
                      child: const Text('Yes'),
                    ),
                  ],
                ));
      }
      return Future.value(true);
    }
  }