1. import 'package:flutter/material.dart';
  2.  
  3. import 'KeepAliveDemo.dart';
  4.  
  5. void main() => runApp(MyApp());
  6.  
  7. class MyApp extends StatelessWidget {
  8.  
  9. @override
  10. Widget build(BuildContext context) {
  11. return MaterialApp(
  12. title: 'Flutter Demo',
  13. theme: ThemeData(
  14. primarySwatch: Colors.green, //定义主题风格 primarySwatch
  15. ),
  16. home: KeepAliveDemo(),
  17. );
  18. }
  19.  
  20. }
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_app/MyHomePage.dart';
  3. class KeepAliveDemo extends StatefulWidget {
  4. _KeepAliveDemoState createState() => _KeepAliveDemoState();
  5. }
  6. /*
  7. 第一步:with是dart的关键字,意思是混入的意思,
  8. 就是说可以将一个或者多个类的功能添加到自己的类无需继承这些类,
  9. 避免多重继承导致的问题。
  10. SingleTickerProviderStateMixin 主要是我们初始化TabController时,
  11. 需要用到vsync ,垂直属性,然后传递this
  12. */
  13. class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin {
  14. TabController _controller;
  15.  
  16. @override
  17. void initState(){
  18. super.initState();
  19. _controller = TabController(length:3, vsync: this);
  20. }
  21. @override //第二步保持页面状态返回true
    bool get wantKeepAlive => true;
  22. //重写被释放的方法,只释放TabController
  23. @override
  24. void dispose(){
  25. _controller.dispose();
  26. super.dispose();
  27. }
  28.  
  29. @override
  30. Widget build(BuildContext context) {
  31. return Scaffold(
  32. appBar:AppBar(
  33. title:Text('Keep Alive Demo'),
  34. bottom:TabBar(
  35. controller: _controller,
  36. tabs:[
  37. Tab(icon:Icon(Icons.directions_car)),
  38. Tab(icon:Icon(Icons.directions_transit)),
  39. Tab(icon:Icon(Icons.directions_bike)),
  40. ],
  41. )
  42. ),
  43. body:TabBarView(
  44. controller: _controller,
  45. children: <Widget>[
  46. MyHomePage(),
  47. MyHomePage(),
  48. MyHomePage()
  49. ],
  50. )
  51. );
  52. }
  53. }

效果:

flutter 保持页面状态的更多相关文章

  1. Flutter 之页面状态保持

    一般情况下,我们使用tab切换的时候希望操作完毕之后,能够记住上个页面的状态, 但是使用Flutter的BottomNavigationBar的 时候默认是不记录页面状态的,即切换页面会导致重新加载. ...

  2. Flutter保持页面状态AutomaticKeepAliveClientMixin

    使用bottomNavigationBar切换底部tab,再切换回来就会丢失之前的状态(重新渲染列表,丢失滚动条位置). 解决方法 使用 AutomaticKeepAliveClientMixin 重 ...

  3. Flutter实战视频-移动电商-16.补充_保持页面状态

    16.补充_保持页面状态 修正一个地方: 设置了item的高度为380 横向列表为380.最终build的高度也增加了50为430. 增加了上面的高度以后,下面那个横线划掉的价格可以显示出来了. 但是 ...

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

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

  5. 09 Flutter底部Tab切换保持页面状态的几种方法

    IndexedStack:保此所有页面的状态: AutomaticKeepAliveClientMixin:保此部分页面的状态: 修改的页面代码: 页面效果: Tabs.dart import 'pa ...

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

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

  7. 巧用location.hash保存页面状态

    在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果 ...

  8. Windows Phone开发(9):关于页面状态

    原文:Windows Phone开发(9):关于页面状态 按照一般做法,刚学会如何导航,还是不够的,因为要知道,手机里面的每个页面,就如同Web页面一样,是无状态的. 啥是无状态?如果我们玩过Web开 ...

  9. 四:理解Page类的运行机制(例:基于PageStatePersister的页面状态存取)

    有人说类似gridview datalist这样的控件最好不要用在高并发,IO大的网站中企业应用中为了快速开发到可以用一用因为这是一类"沉重"的组件我们姑且不谈这种看法的正确性(我 ...

随机推荐

  1. linux 查看 端口3306

    1,查看3306端口被什么程序占用 lsof -i :3306 2,查看3306端口是被哪个服务使用着 netstat -tunlp | grep :3306 3,查看3306端口的是否已在使用中,可 ...

  2. P1072 Hankson 的趣味题[数论]

    题目描述 Hanks 博士是 BT(Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫 Hankson.现在,刚刚放学回家的 Hankson 正在思考一个有趣的问题. 今天在课堂上,老师讲解了 ...

  3. Fiddler——如何抓取PHP的curl请求

    前言 本文主要介绍如何使用fiddler工具,来进行抓取PHP的curl请求,如果你会使用fiddler,那就是一行代码的事, 不会也没事,本文会教你如何简单的使用. 步骤 代码 设置桥接网络为127 ...

  4. laravel 依赖注入

    <?php interface Animal{ public function attack(); public function talk(); } class People implemen ...

  5. jquery手机触屏滑动拼音字母城市选择器代码

    今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...

  6. LightOJ - 1245 - Harmonic Number (II)(数学)

    链接: https://vjudge.net/problem/LightOJ-1245 题意: I was trying to solve problem '1234 - Harmonic Numbe ...

  7. pwn第一周

    源码 #include <stdio.h> #include <stdlib.h> #include <unistd.h> void setbufs() { set ...

  8. 看加载的php.ini 和 phpinfo 配置路径

    php -i | grep "phar.readonly"看当前值php -i | grep "php.ini" 看加载的php.ini是哪个

  9. Maven+SSM整合ehcache

  10. JSP带有标签体的自定义标签

    新建OutTag类 如何添加jsp-api.jar包 OutTag类详细代码 ``` package bid.zhazhapan.fims.tag; import javax.servlet.jsp. ...