Flutter如何后台预加载多个WebView 弹出模态框时不重载

你当前代码触发页面重载的核心原因是：每次弹出底部模态框、ListView构建子项时都会临时创建全新的WebView实例，旧实例在弹窗关闭/列表滑出可视区域后就被系统销毁，没有持久化保存已经完成加载的WebView状态，自然每次展示都会重新加载页面。

可行实现方案如下：

• 核心原则：提前初始化并保活WebView实例，不要在组件build阶段临时创建WebView
  不要等用户点击悬浮按钮唤起弹窗时才生成WebView，在获取到需要预加载的链接时，就立刻为每个链接创建独立的WebView控制器、触发页面加载，同时把WebView实例放在视图树的离屏位置保活，等需要展示时直接复用已经加载完成的实例即可，完全不会触发重载。
• 第一步：定义预加载页面对象，提前初始化控制器并触发加载
  以官方webview_flutter 4.x版本为例（其他WebView插件逻辑一致，核心是分离控制器与视图、提前加载），先定义统一的预加载页存储结构，在实例化时就完成控制器初始化和页面加载：

  // 预加载页面对应的存储结构
  class PreloadWebPage {
    final String url;
    late final WebViewController controller;
    bool isPageLoaded = false;
  
    PreloadWebPage(this.url) {
      // 初始化控制器时就触发页面加载
      controller = WebViewController()
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..setNavigationDelegate(NavigationDelegate(
          onPageFinished: (loadedUrl) {
            isPageLoaded = true;
          },
        ))
        ..loadRequest(Uri.parse(url));
    }
  
    // 复用同一个控制器生成WebView组件，不会触发重载
    Widget buildWebView() {
      return WebViewWidget(
        controller: controller,
        gestureRecognizers: const <Factory<VerticalDragGestureRecognizer>>{
          Factory<VerticalDragGestureRecognizer>(VerticalDragGestureRecognizer.new),
        },
      );
    }
  }
  

  在页面的State中维护预加载页面列表，注意这里存的是预加载页实例，不是单纯的url字符串：

  List<PreloadWebPage> preloadWebsites = [];
  
  // 捕获到需要预加载的链接时，直接添加实例，立刻触发后台加载
  void addPreloadLink(String targetUrl) {
    setState(() {
      preloadWebsites.add(PreloadWebPage(targetUrl));
    });
  }
  

• 第二步：离屏保活预加载WebView，避免实例被销毁
  将所有预加载的WebView用Offstage组件包裹，放在当前页面Stack的最底层，设置为完全隐藏、不响应交互，WebView会在后台持续加载直到页面完全就绪，不会被组件回收：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 主页面内容、主WebView放在正常视图层级
          const Positioned.fill(child: MainWebView()),
          // 离屏保活的预加载WebView，完全不可见，不占用显示空间
          ...preloadWebsites.map((page) => Offstage(
            offstage: true,
            child: SizedBox(height: 1, width: 1, child: page.buildWebView()),
          )),
        ],
      ),
      // 原有悬浮按钮逻辑保留，仅修改弹窗构建方法
      floatingActionButton: DraggableFab(
        child: ElevatedButton(
          child: Text('WebPage ${preloadWebsites.length}'),
          onPressed: () {
            showModalBottomSheet(
              isScrollControlled: true,
              isDismissible: true,
              context: context,
              builder: (context) => buildPreloadedSheet(),
            );
          },
        ),
      ),
    );
  }
  

• 第三步：弹窗构建时直接复用预加载完成的WebView实例
  不要在列表构建方法里新建WebView，直接调用预加载实例已经生成好的WebView组件即可，因为复用了同一个已经加载完成的控制器，不会触发页面重载：

  Widget buildPreloadedSheet() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: preloadWebsites.length,
              itemBuilder: (context, index) {
                final currentPage = preloadWebsites[index];
                return Container(
                  margin: const EdgeInsets.all(10),
                  height: 200,
                  // 直接使用预加载完成的WebView，无重载
                  child: currentPage.buildWebView(),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
  

• 注意事项
  • 不要在ListView的itemBuilder回调中创建WebView或WebViewController，ListView默认是懒加载机制，滑出可视区域的item会被自动销毁，临时创建的实例无法保留加载状态。
  • 单个WebView实例内存占用约10-20M，同时预加载10个左右页面不会有明显性能问题，如果预加载链接较多需要增加LRU缓存淘汰逻辑，避免内存溢出。
  • 如果使用flutter_inappwebview等其他WebView插件，实现逻辑完全一致：提前创建WebView实例与对应控制器、提前触发加载、保活实例不被销毁、展示时直接复用实例。

内容的提问来源于stack exchange，提问作者Kavi Harjani