Flutter 保持页面状态

https://www.cnblogs.com/joe235/p/11213861.html

用以前写的TabBar页面修改下，继续做保持页面状态的功能。

混入：

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin{ //保持页面状态

混入后

1.重写wantKeepAlive

@override
bool get wantKeepAlive => true; //保持页面状态 重写方法

2.必须是StatefulWidget

3.启用pageView和IndexedStack

在底部导航页面index_page.dart，修改：

body: IndexedStack( 
          index:currentIndex,
          children: tabBodies,
   ),

 完整示例代码如下：

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

class TabsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: KeepAliveDemo(),
      theme: ThemeData(
        primaryColor: Colors.red
      ),
    );
  }

}

class KeepAliveDemo extends StatefulWidget {
  _KeepAliveDemoState createState() => _KeepAliveDemoState();
}

class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin {
  TabController _controller;
  //初始状态方法
  @override
  void initState() {
    super.initState();
    _controller = TabController(
      length: 3,  //需要控制的Tab页数量
      vsync: this  //动画效果的异步处理，默认格式，背下来即可
    );
  }
  //销毁方法，当整个页面dispose时，记得把控制器也dispose掉，释放内存
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
         title: Text('Keep Alive Demo'),
         bottom: TabBar(
           controller: _controller, //配置控制器
           tabs: <Widget>[
             Tab(icon: Icon(Icons.directions_car)),
             Tab(icon: Icon(Icons.directions_transit)),
             Tab(icon: Icon(Icons.directions_bike)),
           ],
           indicatorColor: Colors.white, //tab标签的下划线颜色
         ),
      ),
      body: TabBarView(
        controller: _controller, //配置控制器
        children: <Widget>[
          AliveDemo(),
          AliveDemo(),
          AliveDemo(),
        ],
      ),
    );
  }
}

新建keep_alive_demo.dart页面，代码如下：

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

//混入AutomaticKeepAliveClientMixin，这是保持状态的关键
//然后重写wantKeppAlive 的值为true。
class _MyHomePageState extends State<MyHomePage> with AutomaticKeepAliveClientMixin {
  int _counter = 0;
  //重写keepAlive 为ture ，就是可以有记忆功能了。
  @override
  bool get wantKeepAlive => true;
  //声明一个内部方法，用来点击按钮后增加数量
  void _incrementCounter(){
    setState((){ _counter++;});
  }

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

注意三个地方

1) class _MyHomePageState extends State<MyHomePage>
    with AutomaticKeepAliveClientMixin {
2)  @override
  bool get wantKeepAlive => true;
3)  @override
  Widget build(BuildContext context) {
    // 保持页面缓存，这句话必须加上
    super.build(context);

 

Flutter 底部导航栏页面的状态保持 Demo