Flutter中如何实现类似TabBarView.builder的按需构建功能？

哈哈，这个痛点我太懂了！TabBarView默认会一次性把所有页面都构建出来，要是页面多或者每个页面里有网络请求、复杂UI渲染，那启动速度和内存占用都会受影响。你试过PageView.builder是找对方向了，只是没做好和TabBar的联动，我给你捋捋具体怎么弄：

首先核心思路就是用PageView.builder替代TabBarView，再通过TabController把TabBar和PageView绑定起来，这样既能实现Tab切换的交互，又能让页面按需构建。

具体实现步骤： #

• 创建并管理TabController：在StatefulWidget的State类里初始化TabController，要和Tab的数量对应上，记得在dispose时释放它，避免内存泄漏。
• 关联TabBar和TabController：TabBar的controller属性直接用我们创建的TabController，这样Tab的选中状态就能和控制器同步。
• 用PageView.builder实现按需加载：PageView.builder的controller同样绑定这个TabController，然后在itemBuilder里根据index返回对应的页面组件——它只会构建当前可见的页面（默认还会缓存前后各一个页面，这个可以通过cacheExtent调整）。
• 自动同步切换状态：只要两者共用同一个TabController，不管是点击Tab切换，还是滑动PageView切换，两边的选中状态都会自动同步，不用额外写监听逻辑~

完整代码示例： #

import 'package:flutter/material.dart';

class LazyLoadTabPage extends StatefulWidget {
  const LazyLoadTabPage({super.key});

  @override
  State<LazyLoadTabPage> createState() => _LazyLoadTabPageState();
}

class _LazyLoadTabPageState extends State<LazyLoadTabPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<String> _tabTitles = ['页面1', '页面2', '页面3', '页面4'];

  @override
  void initState() {
    super.initState();
    // 初始化TabController，长度和tab数量一致
    _tabController = TabController(length: _tabTitles.length, vsync: this);
  }

  @override
  void dispose() {
    // 记得释放控制器
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: _tabTitles.map((title) => Tab(text: title)).toList(),
        ),
      ),
      body: PageView.builder(
        controller: _tabController,
        // 这里就是按需构建的核心，只有当页面被需要时才会调用这个builder
        itemBuilder: (context, index) {
          print('构建页面${index+1}'); // 可以打印看看哪个页面被构建了
          return Center(
            child: Text('这是${_tabTitles[index]}'),
          );
        },
        itemCount: _tabTitles.length,
        // 如果想要完全不缓存其他页面，可以设置cacheExtent为0，但切换时可能会有加载延迟
        // cacheExtent: 0,
      ),
    );
  }
}

你运行这个代码就能看到，只有切换到某个页面时，控制台才会打印对应的构建日志，说明页面是按需加载的，完美解决TabBarView一次性构建所有子组件的问题~

备注：内容来源于stack exchange，提问作者Rowsen Meredow