底栏切换每次都重新请求是一件非常恶心的事,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('我打印了哈哈哈哈哈');
}

.

Flutter移动电商实战 --(16)切换后页面状态的保持AutomaticKeepAliveClientMixin的更多相关文章

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

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

  2. Flutter移动电商实战 --(24)Provide状态管理基础

    Flutter | 状态管理特别篇 —— Provide:https://juejin.im/post/5c6d4b52f265da2dc675b407?tdsourcetag=s_pcqq_aiom ...

  3. Flutter移动电商实战 --(3)底部导航栏制作

    1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...

  4. Flutter移动电商实战 --(4)打通底部导航栏

    关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. maccms代码审计

    由于工作原因,分析了很多的cms也都写过文章,不过觉得好像没什么骚操作都是网上的基本操作,所以也就没发表在网站上,都保存在本地.最近突然发现自己博客中实战的东西太少了,决定将以前写的一些文章搬过来,由 ...

  2. 从零开始配置一个简单的webpack打包

    一.基础配置 1.创建一个名为demo-webpack的文件夹(名称随意) 2.初始化一个package.json文件 //在cmd窗口中使用以下命令快速创建 npm init -y 3.安装webp ...

  3. ubuntu下使用libsvm

    matlab上的代码已经八八九九了,因为涉及到GUI和网络编程的东西,所以不得已开始学python并在python上做完整版. 下面是如何在linux和python下使用libsvm 在你的pytho ...

  4. 【SQL server】SQL server基础(一)

    一.关系型数据库 关系型数据库的基本元素是二维表,这些二维表可以被独立或者通过join语句连接起来使用.主键和外键是用来连接二维表之间的主要工具 1.主键(primary key)和外键(foreig ...

  5. LAMP源码编译安装

    php加速器 XCache 快速而且稳定的PHP opcode缓存,经过严格测试且被大量用于生产环境. 项目地址:http://xcache.lighttpd.net/,收录EPEL源 实现XCach ...

  6. python3 matplotlib

    一.matplotlib数据可视化 1.https://matplotlib.org/ 2.figure图形窗口:figsize窗口大小,label轴标签:title标题:lim限制:plot绘图:s ...

  7. Python3+Appium学习笔记09-元素定位android_uiautomator

    appium是使用了uiautomator的框架的,所以uiautomator所带的定位方式.appium也是支持的 需要使用appium中find_element_by_android_uiauto ...

  8. 解决 分布式事务中HRESULT:0x8004D025 错误

    最近在开发分布式事务的过程中,碰到 该伙伴事务管理器已经禁止了它对远程/网络事务的支持. (异常来自 HRESULT:0x8004D025)的错误. 后来检查到,原来是数据库服务器的MSDTC 没有设 ...

  9. 2018年5月20日--西安icpc邀请赛打铁总结

    2018年5月20日--西安icpc邀请赛打铁总结  事后诸葛亮 大致回顾一下比赛,29号的热身赛和30号的正式赛. 热身赛总共三道题,一个小时,没有AC一道题目. A题是一个几何题目,审题时犯了一个 ...

  10. CentOS7主机SSH连接失败

    说来话长,之前20刀一年买bandwagon的廉价VPS,由于做了一些违法的事情,导致ip被封了. 检测ip被封的方法:进入ping.chinaz.com:输入IP地址,如果国外节点能够Ping通而国 ...