Flutter进阶实战 8&9-20 保持页面状态

前言：在工作中切换页面时，再切换回来，时要求页面状态不发生改变的。这能给APP浏览者最好的体验，机会所有的APP都有这个需求，属于一个大众需求。为了能看出是保持状态的，我们作一个按钮，然后点一下加一。

实现效果：

一、With 关键字的使用

with是dart的关键字，意思是混入的意思，就是说可以将一个或者多个类的功能添加到自己的类无需继承这些类， 避免多重继承导致的问题。

比如下面的代码：

class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin {

}

需要注意的是with后边是Mixin，而不是普通的Widget，这个初学者比较爱犯错误。需要强调一下。

二、TabBar Widget的使用

TabBar是切换组件，它需要设置两个属性。

• controller: 控制器，后边跟的多是TabController组件。
• tabs：具体切换项，是一个数组，里边放的也是Tab Widget。

bottom:TabBar(
  controller: _controller,
  tabs:[
    Tab(icon:Icon(Icons.directions_car)),
    Tab(icon:Icon(Icons.directions_transit)),
    Tab(icon:Icon(Icons.directions_bike)),
  ],
)

三、基本页面布局

我们先把入口页面布局好，下节课我们再让他保持状态。学了上面两个知识，你其实可以做出来布局了。全部代码如下：

import 'package:flutter/material.dart';
import 'keep_alive_demo.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'TabBar Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new KeepAliveDemo(),
    );
  }
}
class KeepAliveDemo extends StatefulWidget {
  _KeepAliveDemoState createState() => _KeepAliveDemoState();
}

class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin {
  TabController _tabController;//创建一个切换组件控制器
  
  //初始化TabController
  @override
  void initState() { 
    super.initState();
    //设置3个Tab，使用SingleTickerProviderStateMixin引入vsync(垂直属性)，然后传递this
    _tabController=TabController(length: 3,vsync: this);
  }

  //重写被释放的方法，只释放TabController
  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text('keep alive'),
        bottom: TabBar(    //设置切换组件
          controller: _tabController,  //传递控制器变量
          tabs: <Widget>[      //tab数组
              Tab(icon: Icon(Icons.directions_bike)),
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.directions_bus)),
          ],
        ),
      ),
      body: TabBarView(   //Tab显示的视图页面
        controller: _tabController,//传递控制器变量
        children: <Widget>[  //对应上边Tab显示的页面body部分
          MyHomePage(),
          MyHomePage(),
          MyHomePage()
        ],
      ),
    );
  }
}

四、主界面中实现保持状态的功能，新建keep_alive_demo.dart文件

代码如下：

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
//混入AutomaticKeepAliveClientMixin，这是保持状态的关键
class _MyHomePageState extends State<MyHomePage> with AutomaticKeepAliveClientMixin{

  int _account=0; //计数变量

  //重写keepAlive 为ture ，就是可以有记忆功能了,来回切换tab时保持之前的改变。
  @override
  bool get wantKeepAlive=>true;
  
  //点击按钮后计数器加一
  void _incrementCount(){
    setState(() {
     _account++; 
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(   //主界面布局，两个Text
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[  
              Text('点一下加1，点一下加1:'),
              Text(
                '$_account',
                style: Theme.of(context).textTheme.display1,
              )
            ],
          ),
        ),
        //增加一个悬浮按钮，点击时触犯_incrementCounter方法
        floatingActionButton: FloatingActionButton(
            onPressed: _incrementCount,  
            tooltip: 'Increment',  //长按提示
            child: Icon(Icons.add),
        ),
    );
  }
}