問(wèn)題:當(dāng)你遇到Flutter 切換TabBar時(shí)每次會(huì)重新渲染界面 并且AutomaticKeepAliveClientMixin(保留界面當(dāng)前狀態(tài):比如) 這個(gè)屬性沒(méi)有生效

• 檢查App啟動(dòng)入口home->body中:是否使用的PageController

class _RootPageState extends State<RootPage> {
  final PageController _controller = PageController(
    initialPage: 0,
  );

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          onTap: (int index) {
            _currentIndex = index;
            setState(() {
              //刷新
            });
            _controller.jumpToPage(index);//TabBar跳轉(zhuǎn)
          },
          selectedFontSize: 12.0,
          //設(shè)置底部TabBar選中的字體大小
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.green,
          currentIndex: _currentIndex,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
//              icon: Icon(Icons.chat),
              icon: Image(
                  height: 20,
                  width: 20,
                  image: AssetImage('images/tabbar_chat.png')),
              activeIcon: Image(
                  height: 20,
                  width: 20,
                  image: AssetImage('images/tabbar_chat_hl.png')),
              title: Text('微信'),
            ),
            BottomNavigationBarItem(
//              icon: Icon(Icons.bookmark),
              icon: Image(
                  height: 20,
                  width: 20,
                  image: AssetImage('images/tabbar_friends.png')),
              activeIcon: Image(
                  height: 20,
                  width: 20,
                  image: AssetImage('images/tabbar_friends_hl.png')),
              title: Text('通訊錄'),
            ),
            BottomNavigationBarItem(
//              icon: Icon(Icons.history),
              icon: Image(
                  height: 20,
                  width: 20,
                  image: AssetImage('images/tabbar_discover.png')),
              activeIcon: Image(
                  height: 20,
                  width: 20,
                  image: AssetImage('images/tabbar_discover_hl.png')),
              title: Text('發(fā)現(xiàn)'),
            ),
            BottomNavigationBarItem(
//              icon: Icon(Icons.person_outline),
              icon: Image(
                  height: 20,
                  width: 20,
                  image: AssetImage('images/tabbar_mine.png')),
              activeIcon: Image(
                  height: 20,
                  width: 20,
                  image: AssetImage('images/tabbar_mine_hl.png')),
              title: Text('我'),
            ),
          ],
        ),
        body: PageView(
          //TabBarController控制器 左右滾動(dòng) 選中TabBar
//          onPageChanged: (int index){
//            _currentIndex = index;
//            setState(() {//刷新
//            });
//          },
          physics: NeverScrollableScrollPhysics(),//禁止TabBarController 滾動(dòng)
          controller: _controller,
          children: <Widget>[
            ChatPage(),
            FriendsPage(),
            DiscoverPage(),
            MinePage(),
          ],
        ),//pages[_currentIndex]
      ),
    );
  }
}

• 界面保留狀態(tài)設(shè)置 (看完下面前三步描述再看下面代碼)

第一步在state后面混入AutomaticKeepAliveClientMixin

第二步設(shè)置
@override
bool get wantKeepAlive => true; //當(dāng)有了這個(gè)方法之后 只要setState以后就會(huì)保留當(dāng)前的狀態(tài)

第三步 在 Widget build(BuildContext context) 里面super.build(context);

class _ChatPageState extends State<ChatPage>
with AutomaticKeepAliveClientMixin<ChatPage>{//1.(保留當(dāng)前界面狀態(tài))第一步混入AutomaticKeepAliveClientMixin這個(gè)類給_ChatPageState延伸了一些功能  混入之后會(huì)讓當(dāng)前部件保留state狀態(tài)
  //1.發(fā)送網(wǎng)絡(luò)請(qǐng)求 定義一個(gè)模型數(shù)組
  List<Chat> _datas = [];

  bool _cancelConnect = false;

  //2.(保留當(dāng)前界面狀態(tài))第二步保存當(dāng)前界面狀態(tài)
  @override
  bool get wantKeepAlive => true;  //當(dāng)有了這個(gè)方法之后  只要setState以后就會(huì)保留當(dāng)前的狀態(tài)

  //初始化對(duì)象的時(shí)候只調(diào)用一次
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //.then是處理返回的數(shù)據(jù)
    getDatas().then((List<Chat> datas) {
      if(!_cancelConnect){
        //datas 就是返回的數(shù)據(jù)
        setState(() {
          _datas = datas;
        });
      }

    }).catchError((error) {
      print(error);
    }).whenComplete((){
      print('該請(qǐng)求完畢');
    }).timeout(Duration(seconds: 10)).catchError((timeout){
      _cancelConnect = true;
      print('超時(shí):${timeout}');
    });

//    print('來(lái)了 getDatas');
  }

  //Future 類似可選類型 表示接下來(lái)的值可能有值也可能有錯(cuò)誤
  Future<List<Chat>> getDatas() async {
    _cancelConnect = false;
    //異步請(qǐng)求
    final response = await http
        .get('http://rap2api.taobao.org/app/mock/224518/api/chat/list');

    if (response.statusCode == 200) {
      //獲取相應(yīng)數(shù)據(jù),并且轉(zhuǎn)換成Map類型
      final responseBody = json.decode(response.body);
      //轉(zhuǎn)換模型數(shù)組
      List<Chat> chatList = responseBody['chat_list']
          .map<Chat>((item) => Chat.formJson(item))
          .toList();

      return chatList; //數(shù)據(jù)返回
    } else {
      throw Exception('statusCode:${response.statusCode}'); //拋請(qǐng)求異常
    }

    //print(response.statusCode);
    //print(response.body);
  }

  //返回Item 的
  Widget _buildItemForRow(BuildContext context, int index) {
    return ListTile(
      title: Text(_datas[index].name),
      subtitle: Container(
        height: 20,
        width: 20,
        child: Text(
          _datas[index].message,
          overflow: TextOverflow.ellipsis,
        ),
      ),
      leading: CircleAvatar(
        backgroundImage: NetworkImage(_datas[index].imageUrl),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);//3.(保留當(dāng)前界面狀態(tài))第三步這個(gè)是只有當(dāng)你保留當(dāng)前的狀態(tài)之后才需要在build里面super這句代碼
    return Scaffold(
      appBar: AppBar(
        backgroundColor: WeChatThemeColor,
        centerTitle: true, //這個(gè)是解決安卓機(jī)型上導(dǎo)航標(biāo)題居中顯示
        title: Text('微信'),
        actions: <Widget>[
          Container(
            margin: EdgeInsets.only(right: 10),
            child: PopupMenuButton(
              offset: Offset(0, 60.0),
              child: Image(
                image: AssetImage('images/圓加.png'),
                width: 25,
              ),
              itemBuilder: _buildPopupMunuItem,
            ),
          ),
        ], //右側(cè)加號(hào)按鈕 要加手勢(shì)點(diǎn)擊
      ),
      body: Container(
        child: _datas.length == 0
            ? Center(
                child: Text('Loading...'),
              )
            : ListView.builder(
                itemCount: _datas.length,
                itemBuilder: _buildItemForRow,
              ),
      ),
    );
  }
}

#QQ：522608370

# 點(diǎn)下贊唄?。?！

[Flutter （二）布局](http://www.itdecent.cn/p/177729488a95)
[Flutter （三） 狀態(tài)管理](http://www.itdecent.cn/p/c3efbc5a354d)
[Flutter （四） Map轉(zhuǎn)模型](http://www.itdecent.cn/p/1206eb22b7b3)
[Flutter （五） 網(wǎng)絡(luò)請(qǐng)求](http://www.itdecent.cn/p/02cac7f4b676)
[Flutter （六） 保留界面狀態(tài)](http://www.itdecent.cn/p/b76e94a5a816)
[Flutter （七） 混合開發(fā) [配置]](http://www.itdecent.cn/p/b60ce1646fb5)
[Flutter （八） 混合開發(fā) [Flutter完整項(xiàng)目嵌入到原生]](http://www.itdecent.cn/p/9989b79b5f49)