flutter - 如何在 Flutter 中向 WebView 添加后退按钮以完全关闭 WebView？

Question

目前，当我点击一张图片时，它应该打开一个 WebView ，因为图片对象有一个关联的 url。我正在使用 Flutter 的 url_launcher 库，我实现了如下代码:

        onTap: () async {
          final url = image.url;
          if (await canLaunch(url)) {
            await launch(
              url,
              forceSafariVC: true,
              forceWebView: true,
              enableJavaScript: true,
            );
          }
        },

我的理解是，这将启动一个 WebView，这是一个应用内浏览器，而不是将用户带出应用并进入单独的浏览器应用。这工作正常，但页面加载速度慢得多并且 Javascript 元素无法正常工作(例如网站上的动画文本)。另一方面，

        onTap: () async {
          final url = banners[index].url;
          if (await canLaunch(url)) {
            await launch(
              url
            );
          }
        },

工作得更好，因为它更快并且所有内容都正确加载，但它会打开一个外部浏览器，这不是我想要的。

另一个问题是我想在 WebView 的左上角添加一个完成按钮以完全退出 WebView 并返回到我在应用程序中的位置。我只有一个左下角的后退按钮(在 Android 模拟器上)，它可以让我转到我在浏览器中所在的上一页。 如果我没有任何访问权限，如何自定义 WebView 的布局？ url_launcher 似乎在内部处理 WebView 创建，所以我想知道如何从上面的代码获得访问权限以添加该按钮？

谢谢!

Answer 1

如果您以这种方式使用 native webview，则无法自定义 ui。但是，由于您正在显示图像，因此您可以使用 flutter 中的 image.network。

    Image.network(imgURL,fit: BoxFit.fill,
      loadingBuilder:(BuildContext context, Widget child,ImageChunkEvent loadingProgress) {
      if (loadingProgress == null) 
        return child;
      return Center(
         child: CircularProgressIndicator(
         value: loadingProgress.expectedTotalBytes != null ? 
                loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
                 : null,
      ),
     );
    },
   ),

或者，您也可以使用 flutter team 的官方 webview 插件在应用程序 web view 中创建。

webview_flutter: ^2.3.1

在这种方法中，如果您在 ui 中添加后退按钮，您可以在按钮的 onPressed 属性上使用 Navigator.pop(context); 返回