使用TabBarView时加载API数据的图表无法正常显示如何解决

• 状态销毁问题：Flutter的TabBarView默认不会保存非激活态的子组件状态，切换Tab时不在当前展示位的子组件会被销毁。API请求属于异步操作，请求返回时对应Tab的图表组件可能已经被销毁，setState无法触发有效重绘，因此没有渲染内容。而虚拟数据为同步生成，组件销毁前就已完成渲染流程，所以可以正常显示。
• 冗余嵌套问题：TabBarView内部嵌套了额外的PageView，两层可滚动组件的布局约束传递可能出现异常，进一步影响图表组件的尺寸测量和渲染触发。

• 给图表组件添加状态保持
  在LineChart1FromApi、LineChart2FromApi等图表组件的State类中混入AutomaticKeepAliveClientMixin，配置保持组件状态不被销毁，示例代码如下：

class _LineChart1FromApiState extends State<LineChart1FromApi> with AutomaticKeepAliveClientMixin {
  // 开启状态保持
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用父类build方法
    super.build(context);
    // 此处保留原有build逻辑
  }

  // 原有API请求逻辑，添加mounted判断避免操作已销毁组件报错
  void fetchApiData() async {
    var response = await yourApiRequest();
    if (!mounted) return;
    setState(() {
      // 赋值接口返回的图表数据
    });
  }
}

• 移除冗余的PageView嵌套
  TabBarView本身已实现滑动切换能力，无需额外嵌套PageView，直接将图表组件作为TabBarView的子元素即可，调整后代码：

TabBarView(
  children: <Widget>[
    LineChart1FromApi(),
    LineChart2FromApi(),
    LineChart3FromApi(),
    LineChart4FromApi(),
  ],
)

• 可选兜底方案
  如果上述方案仍存在问题，可以将TabBarView替换为IndexedStack配合TabBar手动控制Tab切换，可保证所有Tab的组件都不会被销毁，缺点是首次加载压力较高，适合Tab数量较少的场景。

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