【flutter项目实战】第七节 在使用getx的flutter项目中保持页面状态

保持页面状态，也就是进入页面的第一次会刷新，再次进入不会刷新，除非主动刷新

那如何实现？

一 思考问题

我们知道，getx的view，都是使用StatelessWidget实现的，而IndexdStack是基于StatefulWidget 实现的
并且IndexdStack是不管页面在不在屏幕上，都会加载，所以不符合我们的预期
那么，我们就要使用另外一种办法:AutomaticKeepAliveClientMixin 来实现了
:AutomaticKeepAliveClientMixin 虽然也是基于StatefulWidget ，但是她只会在进入屏幕的时候加载，否则是不加载的

二 怎么实现

实际上就是在需要保持状态的页面混入AutomaticKeepAliveClientMixin即可
但是问题来了，getx的view都是基于StatelessWidget,我们如何混入呢？
其实很简单，只需要创建一个混入AutomaticKeepAliveClientMixin的StatefulWidget ，然后用这个StatefulWidget
包裹我们需要保持页面状态的页面即可

三 实现代码

1. 首先，我们创建一个混入AutomaticKeepAliveClientMixin的StatefulWidget ：KeepAliveWrapper .dart

import 'package:flutter/material.dart';

class KeepAliveWrapper extends StatefulWidget {
  const KeepAliveWrapper({Key? key,@required this.child,this.keepAlive = true}):super(key: key);

  final Widget? child; //用来包裹需要保持状态的view
  final bool keepAlive; //用于设置是否保持
  @override
  State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}

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

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => widget.keepAlive;
}

2. 将需要保持状态的页面包裹
   举例：我要保持home.dart的状态，则进行如下操作

import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:learning/app/services/KeepAliveWrapper.dart';

import '../controllers/home_controller.dart';

class HomeView  extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return KeepAliveWrapper(keepAlive:true,child: Scaffold( //包裹即可，如果不需要更新，则设置keepAlive:false
      appBar: AppBar(
        title: const Text('HomeView'),
        centerTitle: true,
      ),
      body: ListView(
        children: const [
          ListTile(title: Text("11111"),),
          ListTile(title: Text("11111"),),
          ListTile(title: Text("11111"),),
          ListTile(title: Text("11111"),),
          ListTile(title: Text("11111"),),
          ListTile(title: Text("11111"),),
          ListTile(title: Text("11111"),),
          ListTile(title: Text("11111"),),
          ListTile(title: Text("11111"),),
          ListTile(title: Text("2222"),),
          ListTile(title: Text("2222"),),
          ListTile(title: Text("2222"),),
          ListTile(title: Text("2222"),),
          ListTile(title: Text("2222"),),
          ListTile(title: Text("2222"),),
          ListTile(title: Text("3333"),),
          ListTile(title: Text("3333"),),
          ListTile(title: Text("3333"),),
          ListTile(title: Text("3333"),),
          ListTile(title: Text("3333"),),
          ListTile(title: Text("4444"),),
          ListTile(title: Text("4444"),),
          ListTile(title: Text("4444"),),
          ListTile(title: Text("4444"),),
          ListTile(title: Text("4444"),),
          ListTile(title: Text("4444"),),
        ],
      ),
    ));
  }
}

3. 现在我们的页面就可以保持状态了！