Flutter应用启动时预加载Tab对应全部WebView页面方案咨询

你当前遇到的切换Tab重新加载WebView的问题，核心原因是TabBarView默认懒加载机制只会初始化当前可见页面，同时你的WebView页面保活逻辑有遗漏，按下面两步修改即可实现所有WebView启动时预加载： #

1. 替换主页面TabBarView为IndexedStack #

IndexedStack会一次性初始化所有子组件并保持页面状态，修改main.dart中_MyHomePageState的代码：

@override
void initState(){
  super.initState();
  controller = TabController(length: 4, vsync: this);
  // 新增监听器，切换Tab时刷新索引
  controller.addListener(() {
    setState(() {});
  });
}
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: /* 原有AppBar代码不变 */,
    drawer: /* 原有Drawer代码不变 */,
    bottomNavigationBar: /* 原有底部TabBar代码不变 */,
    // 替换原有TabBarView为IndexedStack
    body: IndexedStack(
      index: controller.index,
      children: <Widget>[
        firstpage.HomePage(),
        secondpage.ServicesPage(),
        thirdpage.ClientPage(),
        fourpage.BlogPage(),
      ],
    ),
  );
}

2. 补全WebView页面的保活逻辑 #

你已经给HomePage混入了AutomaticKeepAliveClientMixin，但缺少必填的super.build(context)调用，修改首页及其他三个标签页的build方法：

@override
Widget build(BuildContext context) {
  // 新增这行，保活逻辑才能生效
  super.build(context);
  // 剩下的原有build代码完全不变
  return Scaffold(
    // ...原有代码
  );
}

修改完成后打包运行，应用启动时会同时加载所有4个WebView页面，切换Tab时直接读取已缓存的页面，不会出现重新加载的等待。

可选优化：如果担心启动时同时加载4个WebView导致首页加载变慢，可以在首页onPageFinished回调中通知主页面再加载剩下3个标签页，实现分层预加载。

内容的提问来源于stack exchange，提问作者Tushar Laad