Getx PageView 保持页面状态

---

前言

在使用Get作为状态管理工具时，我的页面继承了GetView，在做首页时需要多个页面，但是继承了GetView的页面不能再继承AutomaticKeepAliveClientMixin，这就导致切换页面会会刷新.
我也不想将GetView改成StatefulWidget，本篇文章是我找到的解决方案

---

一、定义一个KeepAliveWrapper组件

class FhKeepAliveWrapper extends StatefulWidget {
  final Widget child;

  const FhKeepAliveWrapper({Key? key, required this.child}) : super(key: key);

  @override
  State<FhKeepAliveWrapper> createState() => _FhKeepAliveWrapperState();
}

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

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

这里就是一个很简单的StatefulWidget，它with 了AutomaticKeepAliveClientMixin，然后接收一个child 参数

二、使用步骤

PageView(
        controller: controller.pageController,
        children: const [
          FhKeepAliveWrapper(child: HomePage()),
          FhKeepAliveWrapper(child: StorePage()),
          FhKeepAliveWrapper(child: CustomerPage()),
          FhKeepAliveWrapper(child: MessagePage()),
          FhKeepAliveWrapper(child: MyPage()),
        ],
      ),

在使用的时候，直接将页面传入FhKeepAliveWrapper 组件即可

---

总结

最近已经很少写文章了，希望篇文章可以帮到需要的人，喜欢就收藏起来吧