android - 我怎样才能让后退按钮关闭 flutter WebView 插件应用程序在 android 上

Question

我是移动学习的新手，我试图在没有更多 WebView 后退历史记录时使用后退按钮关闭我的应用程序。例如，在 WebView 应用程序中，初始 URL 是 google.com，我导航到 yahoo.com，当我按下后退按钮时，它返回到 google.com，如果我再次按下该应用程序，我希望它在没有时退出更多的历史。我在 flutter WebView 插件页面上尝试了 CanGoBack() 函数，但在 vscode 中出现错误。我不知道如何实现它。

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

class WebviewInFlutter extends StatefulWidget {
  WebviewInFlutter({Key key}) : super(key: key);


  @override
  _WebviewInFlutterState createState() => _WebviewInFlutterState();
}

class _WebviewInFlutterState extends State<WebviewInFlutter> {

  final FirebaseMessaging _messaging = FirebaseMessaging();

  @override
  void initState(){

    super.initState();
    _messaging.getToken().then((token) {
      print(token);
    });

    _messaging.configure(
      onMessage: (Map<String, dynamic> message) async{
        print('on message $message');
      },
      onResume: (Map<String, dynamic> message) async{
        print('on resume $message');
      },
      onLaunch: (Map<String, dynamic> message) async{
        print('on launch $message');
      },
    );
    _messaging.requestNotificationPermissions(
        const IosNotificationSettings(sound: true, badge: true, alert: true));

  }
  final flutterWebviewPlugin = new FlutterWebviewPlugin();




  @override
  Widget build(BuildContext context) {

    return WebviewScaffold(
      url: 'https://google.com',
      hidden: true,
      appCacheEnabled: true,
      withJavascript: true,
      withLocalStorage: true,
      appBar: AppBar(
        actions: <Widget>[
              IconButton(
                icon: Icon(Icons.refresh, color: Color.fromRGBO(255, 255, 255, 1.0),),
                onPressed: () => flutterWebviewPlugin.reload(), // this is reloading the url that was provided to webview, not the current URL.
              )
            ],
          elevation: 1.0,
          centerTitle: true,
          title: Text("Google Mobile")

      ),


    );

  }

}

Answer 1

你可以试试我的插件flutter_inappbrowser (编辑:已重命名为 flutter_inappwebview)。

示例如下:

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  runApp(new MyApp());
}

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

class _MyAppState extends State<MyApp> {

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () async {
          if (webView != null) {
            if (await webView.canGoBack()) {
              // get the webview history
              WebHistory webHistory = await webView.getCopyBackForwardList();
              // if webHistory.currentIndex corresponds to 1 or 0
              if (webHistory.currentIndex <= 1) {
                // then it means that we are on the first page
                // so we can exit
                return true;
              }
              webView.goBack();
              return false;
            }
          }
          return true;
        },
        child: Scaffold(
            appBar: AppBar(
                title: Text("InAppWebView")
            ),
            body: Container(
                child: Column(children: <Widget>[
                  Expanded(
                    child: Container(
                      child: InAppWebView(
                        initialUrl: "https://google.com",
                        initialHeaders: {},
                        initialOptions: InAppWebViewWidgetOptions(
                            inAppWebViewOptions: InAppWebViewOptions(
                              debuggingEnabled: true,
                            )
                        ),
                        onWebViewCreated: (InAppWebViewController controller) {
                          webView = controller;
                        },
                        onLoadStart: (InAppWebViewController controller, String url) {

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

                        },
                      ),
                    ),
                  ),
                ]))
        )
    );
  }
}

如您所见，它使用 WillPopScope widget where onWillPop ( https://api.flutter.dev/flutter/widgets/WillPopScope/onWillPop.html ) 我检查 WebView 是否可以返回，否则将弹出当前路由。