如何使用官方 webview_flutter 插件在 Flutter 中预加载 webview？答案

【问题标题】：How to preload a webview in flutter using the official webview_flutter plugin?如何使用官方 webview_flutter 插件在 Flutter 中预加载 webview？
【发布时间】：2020-09-04 19:22:03
【问题描述】：

我正在 Flutter 中开发应用程序，但在尝试在 webview 中预加载页面时卡住了。基本上，该应用程序使用标签栏，其中包含一些带有普通列表视图内容的标签，以及 2 个应该将 webview 作为内容的标签。知道如何在应用程序加载时预加载 webview 并在后台保持它们的活动状态，因此当用户在选项卡之间滑动并进入 webview 时，站点已经加载并呈现，因此 UX 是无缝的。我尝试创建 WebView 实例并在应用加载时使用 setstate 将其分配给变量，但无济于事。

任何帮助将不胜感激。

【问题讨论】：

标签： flutter webview flutter-layout

【解决方案1】：

所以你可以尝试这样做：

使用 PageView 将您在 TabBar 中调用的小部件包装起来，如 here 所示。

您还可以通过使用 AutomaticKeepAliveClientMixin 扩展有状态小部件来确保 WebView 在加载一次后保持活动状态。在使用这个确保你声明：

 bool get wantKeepAlive => true;

编辑：为了在您的应用程序启动时预加载所有页面，您可以在声明 TabBar 的类中使用 Indexed Stack。包裹正文并像这样调用那里的所有页面：

  Widget build(BuildContext context) {
    return
     Scaffold(
      body:IndexedStack(
              index: _selectedIndex,
              children: _children,
            ),),}

【讨论】：

我正在使用自动保持活动状态，并且它正在完成不每次都重新加载 webview 的工作，但是，它并不能解决我预加载 webview 的问题，因为主要思想是当用户滑动到让我们说选项卡 3，webview 已经加载并且网站已经准备好，我不知道如何在后台加载网页，以便它可以显示

【解决方案2】：

您可以使用 OffStage 小部件包装您的 webview，并将 offstage 参数设置为 true。当某些事件被触发并且您准备好显示页面时，将 offstage 参数翻转为 false。

【讨论】：