Flutter底部tab切换保持页面状态的几种方法

android实战总结 同时被 3 个专栏收录
42 篇文章 0 订阅 ¥99.00 ¥9.90
13 篇文章 0 订阅
4 篇文章 0 订阅

通过视频我们可以看到,当通过底部tabBar将页面在“首页”和“分类”之间进行切换的时候,每一次进入页面的时候该页面的数据都会重新加载。那么如何让页面保持原来的状态,而不是每次都要重新加载刷新数据呢?有两种方式。

第一种方式:采用IndexdStack

IndexdStack和Stack一样,都是层布局控件,可以在一个控件上面放置另一个控件,但唯一不同的是,IndexdStack在同一时刻只能显示子控件中的一个控件,通过index属性来设置显示的控件。

配置底部导航的核心代码如下:

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/pages/tabs/CategoryPage.dart';
import 'package:flutter_jdshop/pages/tabs/HomePage.dart';
import 'package:flutter_jdshop/pages/tabs/ShoppingCartPage.dart';
import 'package:flutter_jdshop/pages/tabs/UserPage.dart';

class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);

  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {

  int _currentIndex = 0;//记录当前选中哪个页面

  List<Widget> _pages = [
    HomePage(),
    CategoryPage(),
    ShoppingCartPage(),
    UserPage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("JDShop")),
      body: this._pages[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.red,//底部导航栏按钮选中时的颜色
        type: BottomNavigationBarType.fixed,//底部导航栏的适配,当item多的时候都展示出来
        currentIndex: this._currentIndex,
        onTap: (index){
          setState(() {
            this._currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
          BottomNavigationBarItem(icon: Icon(Icons.category), title: Text("分类")),
          BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), title: Text("购物车")),
          BottomNavigationBarItem(icon: Icon(Icons.people), title: Text("我的"))
        ],
      ),
    );
  }
}

此时还是不可以保持页面状态的。

这里我们将body由

body: this._pages[this._currentIndex],

替换成

body: IndexedStack(
        index: this._currentIndex,
        children: this._pages,
      ),

这样就能够实现保持页面状态了,效果如下:

我们可以看到,此时,页面的数据只在最开始进来的时候进行加载,然后就保持住这个页面的状态了,并不会每次进来都进行数据的加载刷新了。

使用IndexedStack来保持页面状态的优点就是配置简单,但是它也有很大的缺点:IndexedStack中管理的子页面在一开始就全部一次性加载出来了,不管有没有显示出来,然后通过index属性来确定到底显示哪一个页面

第二种方式:AutomaticKeepAliveClientMixin

如果所有的页面都需要保持页面状态,那么就使用indexdStack;如果有些页面需要保持页面状态,有些页面需要进来就刷新,那么我们就需要使用AutomaticKeepAliveMixin这个类来单独控制某个页面的状态。

AutomaticKeepAliveClientMixin相比IndexdStack,配置起来要复杂一些。

AutomaticKeepAliveClientMixin结合底部BottomNavigationBar来保持页面状态的时候,其配置步骤如下:

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/pages/tabs/CategoryPage.dart';
import 'package:flutter_jdshop/pages/tabs/HomePage.dart';
import 'package:flutter_jdshop/pages/tabs/ShoppingCartPage.dart';
import 'package:flutter_jdshop/pages/tabs/UserPage.dart';

class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);

  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {

  int _currentIndex = 0;//记录当前选中哪个页面
  
  //第1步,声明PageController
  PageController _pageController;

  @override
  void initState() { 
    super.initState();
    //第2步,初始化PageController
    this._pageController = PageController(initialPage: this._currentIndex);
  }

  List<Widget> _pages = [
    HomePage(),
    CategoryPage(),
    ShoppingCartPage(),
    UserPage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("JDShop")),
      //第3步,将body设置成PageView,并配置PageView的controller属性
      body: PageView(
        controller: this._pageController,
        children: this._pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.red,//底部导航栏按钮选中时的颜色
        type: BottomNavigationBarType.fixed,//底部导航栏的适配,当item多的时候都展示出来
        currentIndex: this._currentIndex,
        onTap: (index){
          setState(() {
            //第4步,设置点击底部Tab的时候的页面跳转
            this._currentIndex = index;
            this._pageController.jumpToPage(this._currentIndex);
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
          BottomNavigationBarItem(icon: Icon(Icons.category), title: Text("分类")),
          BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), title: Text("购物车")),
          BottomNavigationBarItem(icon: Icon(Icons.people), title: Text("我的"))
        ],
      ),
    );
  }
}

以上前4步都是在tabs.dart中进行配置的,此时所有的页面还是不可保持页面状态的。然后第5步就是在需要保持页面状态的页面里面混入AutomaticKeepAliveClientMixin类,并将wantKeepAlive方法返回为true,如下所示:

//首页页面
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin{
  
  @override
  bool get wantKeepAlive => true;
  
  
  //分类页面
  class _CategoryPageState extends State<CategoryPage> with AutomaticKeepAliveClientMixin{

  @override
  bool get wantKeepAlive => true;

这样,首页页面和分类页面就实现了页面状态的保持,页面数据只在首次进入该页面的时候进行刷新;而其他没有实现页面保持的页面在每次进入该页面的时候,数据都会刷新

使用AutomaticKeepAliveClientMixin这个类来保持首页和分类页面状态,其效果如下所示:

以上。

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值