Flutter实现页面切换但是保留当前操作状态值(keep_alive)

1、main.dart代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title:'Flutter 保持页面状态',
        theme:ThemeData(
          primarySwatch: Colors.lightBlue,
        ),
        home: KeepAliveStatus(),
      ),
    );
  }
}


class KeepAliveStatus extends StatefulWidget {
  @override
  _KeepAliveStatusState createState() => _KeepAliveStatusState();
}

class _KeepAliveStatusState extends State<KeepAliveStatus> with SingleTickerProviderStateMixin {
  TabController _controller;//私有定义加下划线
  //以下重写创建和销毁的方法
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('保持页面状态'),
        bottom: TabBar(
          controller: _controller,
          tabs: <Widget>[
            Tab(
              icon: Icon(Icons.directions_car),

            ),
            Tab(
              icon: Icon(Icons.directions_transit),

            ),
            Tab(
              icon: Icon(Icons.directions_bike),

            ),
          ],
        ),
      ),
      //每个Tal对应显示的内容
      body: TabBarView(
        controller: _controller,
        children: <Widget>[
          MyHomepage(),
          MyHomepage(),
          MyHomepage(),
        ],
      ),
    );
  }
}

2、keep_status.dart代码

import 'package:flutter/material.dart';

class MyHomepage extends StatefulWidget {
  @override
  _MyHomepageState createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> with AutomaticKeepAliveClientMixin {

  int _counter = 0;

  @override
  // TODO: implement wantKeepAlive
  //重写这个方法，不然会报错
  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'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),

          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
        tooltip: '相加',
        child: Icon(Icons.add),
      ),
    );
  }
}

效果预览