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(2442452451.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<HomePagewith AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive =>true;
}

为了检验结果,我们在 HomePageState 里增加一个 initState,在里边 print 一些内容,如果内容输出了,证明我们的页面重新加载了,如果没输出,证明我们的页面保持了状态。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414344.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js ejs for语句的第二种遍历用法

var A {a:1,b:2,c:3,d:"hello world"};for(var k in A) {console.log(k,A[k]);var h new EJS({element:ejs_render_id}).render(render);}return;转载于:https://www.cnblogs.com/pansidong/p/8708245.html

Android 串口开发——粘包解决方法,定时查询心跳数据,解析心跳数据。——持续更新中

粘包解决方法 方法1 getXOR——是校验方法 /*** 最小数据包的长度(除开数据的N个字节&#xff09;* 帧头 保留字节 协议控制字 地址字段 命令长度 命令码 命令数据 校验和* 2字节 3字节 1字节 2或8字节 2字节 2字节 0-1100字…

17-Flutter移动电商实战-首页_楼层区域的编写

1、楼层标题组件 该组件非常简单&#xff0c;只接收一个图片地址&#xff0c;然后显示即可&#xff1a; class FloorTitle extends StatelessWidget {final String picture_address;FloorTitle({this.picture_address});overrideWidget build(BuildContext context) {return …

webdriver高级应用- 无人工干预地自动下载某个文件

在网页上下载文件时&#xff0c;通常需要人为设定下载文件并选择保持路径&#xff0c;这样就无法实现完全自动的下载过程。下面实现基于firefox浏览器的全自动化文件下载操作&#xff1a; #encodingutf-8 from selenium import webdriver import unittest, timeclass TestDemo(…

Android 使用mqtt实例,包括接收服务器推送以及上传数据到服务器

1、最方便的方法&#xff0c;使用dlc的module连接mqtt 步骤、1——导入dlc依赖和module //dlc_mqttmodule implementation project(:garbagerecyclebox)//dlc公库 implementation(com.github.DlcAndroidTeam123456:DlcCommonLibrary:1.0.31-simple) {exclude group: me.yokeyw…

18-Flutter移动电商实战-首页_火爆专区商品接口制作

1、获取接口的方法 在service/service_method.dart里制作方法。我们先不接收参数&#xff0c;先把接口调通。 Future getHomePageBeloConten() async{try{print(开始获取下拉列表数据.................);Response response;Dio dio new Dio();dio.options.contentTypeConten…

IIS Server Farms入门

概念了解 IIS Server Farms&#xff0c;实际上应该叫“Microsoft Web Farm Framework (WFF)”&#xff0c;依赖于“Web Platform Installer”才能安装&#xff0c;依赖于WebDeploy组件。可参见 Web Farm Framework Setting up a Server Farm with the Web Farm Framework 2.0 f…

flutter中的异步机制Future

饿补一下Flutter中Http请求的异步操作。 Dart是一个单线程语言&#xff0c;可以理解成物理线路中的串联&#xff0c;当其遇到有延迟的运算&#xff08;比如IO操作、延时执行&#xff09;时&#xff0c;线程中按顺序执行的运算就会阻塞&#xff0c;用户就会感觉到卡顿&#xff0…

前端学习(2825):vs开发小程序的插件

推荐以下四个插件 wechat-snippet 微信小程序代码辅助,代码片段自动完成minapp 微信小程序标签、属性的智能补全&#xff08;同时支持原生小程序、mpvue 和 wepy 框架&#xff0c;并提供 snippets&#xff09; 需要输入<才会触发标签补全 输入空格会触发对应标签的属性补全…

软件工程导论团队项目

软件工程导论团队项目&#xff08;速课小龙&#xff09; 一&#xff0e;团队介绍 1.团队成员 邓 旭 2016012068 &#xff08;组长&#xff09; 陈逸璇 2016012056 周紫伊 2016012043 谢月鹏 2016012066 洪泽芳 2016011988 葛金星 2016011992 2.队名&#xff1a;速课小龙 3.项…

java.util.ConcurrentModificationException

Android使用ArrayLists时报错&#xff1a;java.util.ConcurrentModificationException 报错原因是同一个集合被多个线程编辑了。导致集合元素丢失 解决方法—— 1、改有CopyOnWriteArrayList private List<MqttMsgBean> mqttMsgList new CopyOnWriteArrayList<>…

工作272:上传部分代码优化之两种上传视频的方式

两种预览视频的方式 <!--<div style"width: 500px;height: 400px" align"center"><iframe height498 width510 srchttp://xcom/uploads/2020-12-23/20201223125205_636.mp4 frameborder0 allowfullscreen></iframe></div>-->…

面试必备:HashMap、Hashtable、ConcurrentHashMap的原理与区别

本文转载自 夏雪冬日&#xff1a;https://www.cnblogs.com/heyonggang/p/9112731.html 在实际面试过程中出现集合 Map 的概率接近 100%&#xff0c;可见不背上个 Map 相关的题目都不好意思去面试了。 如果你去面试&#xff0c;面试官不问你这个问题&#xff0c;你来找我^_^ 下…

tomcat,eclipse,sts绿色运行

D:\apache-tomcat-8.5.29\bin\setclasspath.bat 最开始处设置&#xff0c;可以是相对路径 set JAVA_HOMED:\Program Files\jdk1.8.0_131set JRE_HOMED:\Program Files\jdk1.8.0_131\jre 类eclipse配置文件 sts.ini -startup plugins/org.eclipse.equinox.launcher_1.4.0.v20161…

Android 设备启动时,APP应用自启动

添加一个开机监听即可 <!--开机广播权限--> <uses-permission android:name"android.permission.RECEIVE_BOOT_COMPLETED" /> public class BootReceiver extends BroadcastReceiver {Overridepublic void onReceive(Context context, Intent intent) …

Eclipse中将java类打成jar包形式运行

记录一次帮助小伙伴将java类打成jar包运行 1、创建java project项目 file > new > project > java project 随便起一个项目名称&#xff0c;finish 完成后项目结构如下&#xff1a; 2、植入java类 将准备好的java类&#xff0c;植入项目中&#xff0c;在 src 目录中…

工作274:ele-图标使用

/*各个路由模块的建立*/ import Home from "/views/Home/Home"; import GlobalLayout from "/layout/GlobalLayout"; import Login from "/views/login/Login"; import Check from "/views/login/Check"; const SYSTEM_MANAGEMENT &q…

串口开发,数据类型转换——字符串转 byte[],byte[]转二进制,二进制转十进制转byte[],byte[]转十进制,byte[]拼接,校验

bytez转String /*** 字节数组转换成对应的16进制表示的字符串** param src* return*/ public static String bytes2HexStr(byte[] src) {StringBuilder builder new StringBuilder();if (src null || src.length < 0) {return "";}char[] buffer new char[2];…