flutter學習--保持頁面狀態

在工作中切換頁面時，再切換回來，時要求頁面狀態不發生改變的。這能給APP瀏覽者最好的體驗，幾乎所有的APP都有這個需求，屬於一個大衆需求。

With 關鍵字的使用

with是dart的關鍵字，意思是混入的意思，就是說可以將一個或者多個類的功能添加到自己的類無需繼承這些類， 避免多重繼承導致的問題。

class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin {

}

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';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme:ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:KeepAliveDemo()
    );
  }
} 

class KeepAliveDemo extends StatefulWidget {
  _KeepAliveDemoState createState() => _KeepAliveDemoState();
}
/*
with是dart的關鍵字，意思是混入的意思，
就是說可以將一個或者多個類的功能添加到自己的類無需繼承這些類，
避免多重繼承導致的問題。
SingleTickerProviderStateMixin 主要是我們初始化TabController時，
需要用到vsync ，垂直屬性，然後傳遞this
*/
class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin {
  TabController _controller;

  @override
  void initState(){
    super.initState();
    _controller = TabController(length:3, vsync: this);
  }

  //重寫被釋放的方法，只釋放TabController
  @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:[
            Tab(icon:Icon(Icons.directions_car)),
            Tab(icon:Icon(Icons.directions_transit)),
            Tab(icon:Icon(Icons.directions_bike)),
          ],
        )
      ),
      body:TabBarView(
        controller: _controller,
        children: <Widget>[
         Text('1111'),
         Text('2222'),
         Text('3333')
        ],
      )
    );
  }
}

頁面

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),
      ),
    );
  }
}