flutter

AutomaticKeepAliveClientMixin 无效 （配合BottomAppBar）

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

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

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

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

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

主要方法

1：PageController

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

2：PageView

1
2
3
4
PageView(
        controller: _pageController,
        children: _eachView,
      ),

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

以下是完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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}'))),
    );
  }
}