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

Question

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

3

目前当我点击一张图片时，由于该图片对象有关联的URL，因此应该打开一个Web视图。我正在使用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的左上角添加一个“完成”按钮，以完全退出WebView并返回到应用程序中的上一个页面。但是我只有一个返回按钮位于左下角（在Android模拟器上），可以让我回到我之前在浏览器中所处的上一页。如果我没有任何访问权，如何自定义WebView的布局？ url_launcher似乎在内部处理了WebView的创建，因此我想知道如何从上述代码中获得访问权限以添加该按钮？

谢谢！

- wepowf

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shatanik Mahanty · Accepted Answer

如果您以这种方式使用本机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团队的官方Webview插件来创建应用内Web视图。

webview_flutter: ^2.3.1

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