底栏切换每次都重新请求是一件非常恶心的事,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的更多相关文章

  1. Flutter移动电商实战 --(16)切换后页面状态的保持AutomaticKeepAliveClientMixin

    底栏切换每次都重新请求是一件非常恶心的事,flutter 中提供了AutomaticKeepAliveClientMixin 帮我们完成页面状态保存效果. 1.AutomaticKeepAliveCl ...

  2. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

  3. Flutter移动电商实战 --(48)详细页_详情和评论的切换

    增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/material.dart'; i ...

  4. Flutter移动电商实战 --(31)列表页_列表切换交互制作

    点击左侧的大类右边的小类也跟着变化 新建provide 要改变哪里就建哪里的provide,我们现在要改变的是右边的商品列表的数组. category_goods_list.dart 这样我们的pro ...

  5. Flutter移动电商实战 --(9)移动商城数据请求实战

    1.URL接口管理文件建立 第一步需要在建立一个URL的管理文件,因为课程的接口会一直进行变化,所以单独拿出来会非常方便变化接口.当然工作中的URL管理也是需要这样配置的,以为我们会不断的切换好几个服 ...

  6. Flutter移动电商实战 --(1)项目学习记录

    1.项目相关截图 2.项目知识点梳理图 Dio2.0: Dio是一个强大的 Dart Http 请求库,支持 Restful API.FormData.拦截器.请求取消等操作. Swiper: Swi ...

  7. Flutter移动电商实战 --(36)FlutterToast插件使用

    https://github.com/PonnamKarthik/FlutterToast fluttertoast: ^3.0.1 category_page.dart页面添加引用 import ' ...

  8. Flutter移动电商实战 --(35)列表页_上拉加载更多制作

    右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的变量 下图是我们之前在首页的时候 ...

  9. Flutter移动电商实战 --(10)使用FlutterSwiper制作轮播效果

    1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍 ...

随机推荐

  1. Linux下c语言TCP多线程聊天室

    开发环境:Linux,GCC 相关知识:TCP(博客:传送门),线程 附加:项目可能还有写不足之处,有些bug没调出来(如:对在线人数的控制),希望大佬赐教. 那么话不多说,放码过来: 码云:传送门, ...

  2. apache添加ssl协议实现用户认证

    目标 1对服务器的访问由http改为https, 2仅有证书的客户端可以访问服务器, 3.通过服务器端的配置,可以停用某个客户端的证书. 一 Apache服务器相关配置: 在../apache/con ...

  3. Java学习:面向对象的三大特征:封装性、继承性、多态性之继承性

    面向对象的三大特征:封装性.继承性.多态性. 继承 继承是多态的前提 ,如果没有继承,就没有多态. 继承主要解决的问题就是:共性抽取. 继承关系当中的特点: 子类可以拥有父类的“内容” 子类还可以拥有 ...

  4. golang 学习笔记 -- 类型

    int 和 uint的实际宽度会根据计算架构不同而不同,386下4个字节, amd64下8个字节 byte可看做uint8的别名类型 rune可看做int32的别名类型,专用于存储Unicode编码的 ...

  5. spring注解@postConstruct与constructor与@Autowired的启动顺序

    本文链接:https://blog.csdn.net/zpflwy1314/article/details/80797756 @Postcontruct’在依赖注入完成后自动调用,例如要将对象a注入到 ...

  6. 为什么要用 redis 而不用 map 做缓存?

    缓存分为本地缓存和分布式缓存.以 Java 为例,使用自带的 map 或者 guava 实现的是本地缓存,最主要的特点是轻量以及快速,生命周期随着 jvm 的销毁而结束,并且在多实例的情况下,每个实例 ...

  7. MybatisGenerator生成SSM的dao层

    官网下载 mybatis generator 下载generator的release版本mybatis-generator-core-1.4.0-bundle.zip https://github.c ...

  8. 31、splice()用法

    改变数组,向数组中添加/删除元素: eg: 1.删除元素: let arr=['bob','lily','bike','sam']; arr.splice(2,1) console.log(arr) ...

  9. jQuery绑定事件的四种方式:bind、live、delegate、on

    1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...

  10. APS系统的现状以及与MES系统的关联

    MES是智能工厂的核心,将前端产品设计.工艺定义阶段的产品数据管理与后端制造阶段的生产数据管理融合,实现产品设计.生产过程.维修服务闭环协同全生命周期管理. APS就是高级计划排程 应该说APS本来是 ...