AutomaticKeepAliveClientMixin 无效 （配合BottomAppBar） flutter

Flutter的开发过程中，继承了AutomaticKeepAliveClientMixin

并且重载了wantKeepAlive 方法 返回true，甚至super content

但是任然无效，查询过程中发现很多人遇到此问题，所以记录一下

后来发现需配合一些控件才能实现效果 比如PageView ，TabBarView

 

切换之后就不会丢失当前的状态了，也不会再次调用initstate()方法

 

 

 

主要方法

1：PageController

PageController _pageController; _pageController = PageController(initialPage: this._index, keepPage: true);

2：PageView

PageView( controller: _pageController, children: _eachView, ),

3：控件继承 AutomaticKeepAliveClientMixin 并重载wantKeepAlive 方法

 

以下是完整代码

import 'package:flutter/material.dart';
import 'package:jxz/widget/my_appbar.dart';

class DemoBottomBarPage extends StatefulWidget {
  @override
  _DemoBottomBarPageState createState() => _DemoBottomBarPageState();
}

class _DemoBottomBarPageState extends State<DemoBottomBarPage> {
  //TabBarView 也可以  但是是 是TabController
  PageController _pageController;
  List<Widget> _eachView;
  int _index = 0;

  @override
  void initState() {
    _eachView = List();
    _eachView..add(EachView())..add(EachView2());

    this._pageController = PageController(initialPage: this._index, keepPage: true);
    super.initState();
  }

  @override
  void dispose() {
    //记得要销毁哦
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(title: '底部导航'),
      floatingActionButton: FloatingActionButton(
          //浮动交互按钮
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
              return EachView();
            }));
          },
          tooltip: '新建页', //长按提示
          backgroundColor: Colors.indigoAccent, //背景颜色
          child: Icon(
            Icons.add,
            color: Colors.white,
          )),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      //融合底部工具栏
      bottomNavigationBar: BottomAppBar(
        color: Colors.indigo,
        shape: CircularNotchedRectangle(), //圆形缺口  和  FloatingActionButtonLocation融合
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.home),
              color: Colors.white,
              onPressed: () {
                setState(() {
                  _index = 0;
                  _pageController.jumpToPage(_index);
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.person),
              color: Colors.white,
              onPressed: () {
                setState(() {
                  _index = 1;
                  _pageController.jumpToPage(_index);
                });
              },
            ),
          ],
        ),
      ),
      body: PageView(
        //禁用横向滑动切换
        physics: NeverScrollableScrollPhysics(),
        controller: _pageController,
        children: _eachView,
      ),
    );
  }
}

class EachView extends StatefulWidget {
  @override
  _EachViewState createState() => _EachViewState();
}

/// 继承  AutomaticKeepAliveClientMixin 保持界面状态
class _EachViewState extends State<EachView> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            width: 220,
            child: TextFormField(
              decoration: InputDecoration(labelText: '手机号', hintText: '请输入手机号'),
            )));
  }
}

class EachView2 extends StatefulWidget {
  @override
  _EachView2State createState() => _EachView2State();
}

class _EachView2State extends State<EachView2> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  List devices = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: devices.length,
      itemExtent: 120,
      itemBuilder: (_, index) => Card(child: Center(child: Text('当前Item:${index}'))),
    );
  }
}