16-Flutter移动电商实战-切换后页面状态的保持AutomaticKeepAliveClientMixin
底栏切换每次都重新请求是一件非常恶心的事,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 一些内容,如果内容输出了,证明我们的页面重新加载了,如果没输出,证明我们的页面保持了状态。
@overridevoid initState() { super.initState(); print('我打印了哈哈哈哈哈');}
16-Flutter移动电商实战-切换后页面状态的保持AutomaticKeepAliveClientMixin相关推荐
- Flutter移动电商实战 --(14)首页_拨打电话操作
拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...
- 01-Flutter移动电商实战-项目学习记录
01-Flutter移动电商实战-项目学习记录 一直想系统性的学习一下 Flutter,正好看到该课程<Flutter移动电商实战>的百度云资源,共 69 课时,由于怕自己坚持不下去(经常 ...
- 09-Flutter移动电商实战-移动商城数据请求实战
09-Flutter移动电商实战-移动商城数据请求实战 1.URL接口管理文件建立 第一步需要在建立一个URL的管理文件,因为课程的接口会一直进行变化,所以单独拿出来会非常方便变化接口.当然工作中的U ...
- 03-Flutter移动电商实战-底部导航栏制作
03-Flutter移动电商实战-底部导航栏制作 1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Goog ...
- 11-Flutter移动电商实战-首页_屏幕适配方案和制作
11-Flutter移动电商实战-首页_屏幕适配方案和制作 1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理 ...
- 08-Flutter移动电商实战-dio基础_伪造请求头获取数据
08-Flutter移动电商实战-dio基础_伪造请求头获取数据 在很多时候,后端为了安全都会有一些请求头的限制,只有请求头对了,才能正确返回数据.这虽然限制了一些人恶意请求数据,但是对于我们聪明的程 ...
- 06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作
06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作 上篇文章中,我们只看到了 dio 的使用方式,但并未跟应用关联起来,所以这一篇将 dio 网络请求与应用界面结合起来, ...
- 05-Flutter移动电商实战-dio基础_引入和简单的Get请求
05-Flutter移动电商实战-dio基础_引入和简单的Get请求 这篇开始我们学习Dart第三方Http请求库dio,这是国人开源的一个项目,也是国内用的最广泛的Dart Http请求库. 1.d ...
- 04-Flutter移动电商实战-打通底部导航栏
04-Flutter移动电商实战-打通底部导航栏 关于界面切换以及底栏的实现可参考之前写的一篇文章: Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个 ...
最新文章
- oracle fra空间不足,ORACLE 基础解决方案1_扩大FRA区
- OpenGL:使用FBO为渲染对象并从GPU取出存图
- Xilinx FPGA GTX的DRP速率配置详解
- ABB机器人的 备份与恢复
- c语言 在执行区域没有空格,C语言上机操作指导之TurboC.doc
- 【python】SOCK_STREAM和SOCK_DGRAM两种类型的区别【转】
- Android系统(187)---最易懂的Activity启动模式详解
- 分析Vector、ArrayList、Hashtable、HashMap数据结分享一下
- Spark分组取TopN
- Datalogic得利捷携突破性无线充电技术推出三款最新产品
- 【Unity】制作剧情向游戏使用Fungus插件
- jrtplib linux编译,jrtplib+jthread 交叉编译
- TP框架打印输出原生sql语句
- 深度探索C++对象模型-Data语义学
- 网站获取微信授权登录功能
- css html文字淡入淡出,Css淡入淡出
- 静态路由——手写路由表及综合实验
- 阿里云教你掌握API的使用方法
- 大数据面前,统计学的价值在哪里
- Roll A Ball