如何在 Flutter 中向 WebView 添加返回按钮以完全关闭 WebView？

Question

目前，当我点击图像时，它应该打开一个 Web 视图，因为图像对象具有关联的 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

如果您以这种方式使用本机 webview，则无法自定义 ui。但是，由于您正在显示图像，因此您可以使用颤振中的 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 团队的官方 webview 插件在应用程序中创建 web 视图。

webview_flutter: ^2.3.1

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