底欄切換每次都重新請求是一件非常惡心的事，flutter 中提供了AutomaticKeepAliveClientMixin 幫我們完成頁面狀態保存效果。

1、AutomaticKeepAliveClientMixin

AutomaticKeepAliveClientMixin 這個 Mixin 是 Flutter 為了保持頁面設置的。哪個頁面需要保持頁面狀態，就在這個頁面進行混入。

不過使用使用這個 Mixin 是有幾個先決條件的：

• 使用的頁面必須是 StatefulWidget，如果是 StatelessWidget 是沒辦法辦法使用的。
• 其實只有兩個前置組件才能保持頁面狀態：PageView 和 IndexedStack。
• 重寫 wantKeepAlive 方法，如果不重寫也是實現不了的。

2、修改index_page.dart

明白基本知識之后，就可以修改 index_page.dart，思路就是增加一個 IndexedStack 包裹在 tabBodies 外邊。

整體代碼如下：

import?'package:flutter/cupertino.dart';
import?'package:flutter/material.dart';
import?'home_page.dart';
import?'category_page.dart';
import?'cart_page.dart';
import?'member_page.dart';


class?IndexPage?extends?StatefulWidget?{
??_IndexPageState?createState()?=>?_IndexPageState();
}

class?_IndexPageState?extends?State<IndexPage>{

??PageController?_pageController;

??final?List<BottomNavigationBarItem>?bottomTabs?=?[
????BottomNavigationBarItem(
??????icon:Icon(CupertinoIcons.home),
??????title:Text('首頁')
????),
????BottomNavigationBarItem(
??????icon:Icon(CupertinoIcons.search),
??????title:Text('分類')
????),
????BottomNavigationBarItem(
??????icon:Icon(CupertinoIcons.shopping_cart),
??????title:Text('購物車')
????),
?????BottomNavigationBarItem(
??????icon:Icon(CupertinoIcons.profile_circled),
??????title:Text('會員中心')
????),
??];

??final?List<Widget>?tabBodies?=?[
????HomePage(),
????CategoryPage(),
????CartPage(),
????MemberPage()
??];

??int?currentIndex=?0;
??var?currentPage?;

??@override
??void?initState()?{
???currentPage=tabBodies[currentIndex];
???_pageController=new?PageController()
??????..addListener(()?{
????????if?(currentPage?!=?_pageController.page.round())?{
??????????setState(()?{
????????????currentPage?=?_pageController.page.round();
??????????});
????????}
??});
??super.initState();
??}

??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????backgroundColor:?Color.fromRGBO(244,?245,?245,?1.0),
??????bottomNavigationBar:?BottomNavigationBar(
????????type:BottomNavigationBarType.fixed,
????????currentIndex:?currentIndex,
????????items:bottomTabs,
????????onTap:?(index){
??????????setState(()?{
???????????currentIndex=index;
????????????currentPage?=tabBodies[currentIndex];?
??????????});

????????},
??????),
??????body:?IndexedStack(
????????index:?currentIndex,
????????children:?tabBodies
??????)
????);
??}
}

3、加入Mixin保持頁面狀態

在 home_page.dart 里加入 AutomaticKeepAliveClientMixin 混入，加入后需要重寫 wantKeepAlive 方法。

主要代碼如下：

class?_HomePageState?extends?State<HomePage>?with?AutomaticKeepAliveClientMixin?{

??@override
??bool?get?wantKeepAlive?=>true;
}

為了檢驗結果，我們在 HomePageState 里增加一個 initState，在里邊 print 一些內容，如果內容輸出了，證明我們的頁面重新加載了，如果沒輸出，證明我們的頁面保持了狀態。

@override
void?initState()?{
????super.initState();
????print('我打印了哈哈哈哈哈');
}

總結

以上是生活随笔為你收集整理的16-Flutter移动电商实战-切换后页面状态的保持AutomaticKeepAliveClientMixin的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。