在工作中切换页面时，再切换回来，时要求页面状态不发生改变的。这能给APP浏览者最好的体验，几乎所有的APP都有这个需求，属于一个大众需求

保持页面状态 - 图1

With 关键字的使用

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

比如下面的代码：

  1. class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin {}

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

TabBar Widget的使用

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

  • controller: 控制器，后边跟的多是TabController组件。
  • tabs：具体切换项，是一个数组，里边放的也是Tab Widget。
    1. bottom:TabBar(
    2. controller: _controller,
    3. tabs:[
    4.   Tab(icon:Icon(Icons.directions_car)),
    5.   Tab(icon:Icon(Icons.directions_transit)),
    6.   Tab(icon:Icon(Icons.directions_bike)),
    7. ],
    8. )

    基本页面布局

    我们先把入口页面布局好，下节课我们再让他保持状态。学了上面两个知识，你其实可以做出来布局了。全部代码如下：
    1. import 'package:flutter/material.dart';
    2. void main()=>runApp(MyApp());
    3. class MyApp extends StatelessWidget {
    4. @override
    5. Widget build(BuildContext context) {
    6.   return MaterialApp(
    7.     title: 'Flutter Demo',
    8.     theme:ThemeData(
    9.       primarySwatch: Colors.blue,
    10.     ),
    11.     home:KeepAliveDemo()
    12.   );
    13. }
    14. } 
    15. class KeepAliveDemo extends StatefulWidget {
    16. _KeepAliveDemoState createState() => _KeepAliveDemoState();
    17. }
    18. /*
    19. with是dart的关键字，意思是混入的意思，
    20. 就是说可以将一个或者多个类的功能添加到自己的类无需继承这些类，
    21. 避免多重继承导致的问题。
    22. SingleTickerProviderStateMixin(单选提供程序状态混合) 主要是我们初始化TabController时，
    23. 需要用到 vsync ，垂直属性，然后传递this
    24. */
    25. class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin {
    26. TabController _controller;
    27. @override
    28. void initState(){
    29.   _controller = TabController(length:3, vsync: this);
    30.   super.initState();
    31. }
    32. //重写被释放的方法，只释放TabController
    33. @override
    34. void dispose(){
    35.   _controller.dispose();
    36.   super.dispose();
    37. }
    38. @override
    39. Widget build(BuildContext context) {
    40.   return Scaffold(
    41.     appBar:AppBar(
    42.       title:Text('Keep Alive Demo'),
    43.       bottom:TabBar(
    44.         controller: _controller,
    45.         tabs:[
    46.           Tab(icon:Icon(Icons.directions_car)),
    47.           Tab(icon:Icon(Icons.directions_transit)),
    48.           Tab(icon:Icon(Icons.directions_bike)),
    49.         ],
    50.       )
    51.     ),
    52.     body:TabBarView(
    53.       controller: _controller,
    54.       children: <Widget>[
    55.        Text('1111'),
    56.        Text('2222'),
    57.        Text('3333')
    58.       ],
    59.     )
    60.   );
    61. }
    62. }

保持状态

那为了能看出是保持状态的，我们作一个按钮，然后点一下加一。就跟Flutter为我们生成的例子一样

  • 创建一个keep_alive_demo.dart文件

  • 重写keepAlive 为ture ，就是可以有记忆功能了。

    @override
    bool get wantKeepAlive => true; ```dart import ‘package:flutter/material.dart’;

class MyHomePage extends StatefulWidget {

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

//混入AutomaticKeepAliveClientMixin，这是保持状态的关键 //然后重写wantKeppAlive 的值为true。 class _MyHomePageState extends State 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: [ Text(‘点一下加1，点一下加1:’), Text( ‘$_counter’, style:Theme.of(context).textTheme.display1, ) ], ), ), //增加一个悬浮按钮，点击时触犯_incrementCounter方法 floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: ‘Increment’, child: Icon(Icons.add), ), ); } } ```

  • 写完这个Widget，然后在入口文件中main.dart引入 import ‘keep_alive_demo.dart’;
  • 然后把Body区域的Text()改成我们刚写的MyHomePage Widget 就可以了，注意是改三个

    附件

    保持页面状态-lib.zip