Flutter 页面状态保持

使用 TabBar 和 TabBarView 结合展示数据，当页面 A 切换到 B，然后从 B 切换回 A，这时候就会发现 A 页面的状态又恢复到初始状态了，这不是想要的结果，需要减少不必要的重绘，这时候就需要页面状态保持。

使用 AutomaticKeepAliveClientMixin 进行页面状态保持

1. 新建一个有状态的 Widget 类
2. 让 State 子类混入 AutomaticKeepAliveClientMixin
3. 实现 wantKeepAlive 方法，返回值为 true
4. 在 build 方法中调用父类的 build 方法，示例：super.build(context)

示例代码展示

import 'package:flutter/material.dart';

class KeepAliveWrapper extends StatefulWidget {
  final bool keepAlive;
  final Widget child;

  const KeepAliveWrapper({
    super.key,
    required this.child,
    this.keepAlive = true,
  });

  @override
  State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}

class _KeepAliveWrapperState extends State<KeepAliveWrapper>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return widget.child;
  }

  @override
  bool get wantKeepAlive => widget.keepAlive;

  @override
  void didUpdateWidget(covariant KeepAliveWrapper oldWidget) {
    if (oldWidget.keepAlive != widget.keepAlive) {
      updateKeepAlive();
    }

    super.didUpdateWidget(oldWidget);
  }
}

以上代码就是一个可以直接使用的页面状态保持的 Widget 类，使用方便快捷。使用如下：

TabBarView(
    controller: _tabController,
    children: [
        // DynamicListPage 就是需要状态保持的页面
        const KeepAliveWrapper(child: DynamicListPage()),
    ],
)