20个Flutter实例视频教程-第08节: 保持页面状态
博客地址:
https://jspang.com/post/flutterDemo.html#toc-bb9
视频地址:
https://www.bilibili.com/video/av39709290/?p=8
创建项目demo05
keepAliveDemo是一个自定义组件
keepAliveDemo这个组件必须是个动态组件,因为他来回的切换还要变换里面的效果
sfu快捷键快速生成
第一个知识点就是with。
这里我们继承自State,如果我们还要继承其他的类呢?这里就用到了with。表示混入。为了解决多重继承的问题
混入with SingleTickerProviderStateMixin。作用就是我们在初始化Tabcontroller的时候要用到一个垂直的选项。这个选项必须在这个混入里面使用
我们现在已经混入了这个类
定义TabController _controller.
因为要保持来回切换这个状态页面不变。所以要重写我们的销毁方法和initState方法
再重写我们的销毁方法
然后再来写我们的TabBar
最终效果:
代码
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: KeepAliveDemo()
);
}
} class KeepAliveDemo extends StatefulWidget {
@override
_KeepAliveDemoState createState() => _KeepAliveDemoState();
} class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin {
TabController _controller;
@override
void initState() {
super.initState();
_controller=TabController(length: ,vsync:this);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Keep Alive Demo'),
bottom: TabBar(
controller: _controller,
tabs:[
Tab(icon: Icon(Icons.directions_car),),
Tab(icon: Icon(Icons.directions_transit),),
Tab(icon: Icon(Icons.directions_bike),),
]
),
),
body: TabBarView(
controller: _controller,
children: <Widget>[
Text(''),
Text(''),
Text(''),
],
),
);
}
}
main.dart
20个Flutter实例视频教程-第08节: 保持页面状态的更多相关文章
- 20个Flutter实例视频教程-第09节: 保持页面状态-2
视频地址:https://www.bilibili.com/video/av39709290/?p=9 博客地址:https://jspang.com/post/flutterDemo.html#to ...
- 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1
20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...
- 20个Flutter实例视频教程-第13节: 展开闭合案例
20个Flutter实例视频教程-第13节: 展开闭合案例 视频地址: https://www.bilibili.com/video/av39709290/?p=13 博客地址: https://js ...
- 20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1
第03节: 不规则底部工具栏制作-1 博客地址: https://jspang.com/post/flutterDemo.html#toc-973 视频地址: https://www.bilibili ...
- 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1
视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第02节: 底部导航栏制作-2
视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...
- 20个Flutter实例视频教程-第04节: 不规则底部工具栏制作-2
视频地址: https://www.bilibili.com/video/av39709290/?p=4 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2
博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...
- 20个Flutter实例视频教程-第07节: 毛玻璃效果制作
视频地址: https://www.bilibili.com/video/av39709290/?p=7 博客地址: https://jspang.com/post/flutterDemo.html# ...
随机推荐
- Laravel建站02--配置Laravel
Laravel项目的根目录下有.env文件,如果没有可以把.env.example改名为.env 这个文件是配置文件,可以把app_key.数据库.redis缓存等配置信息写在这个文件里. 目前5.4 ...
- svn 命令个
svn 命令行下常用的几个命令 标签: svnpathdelete工作urlfile 2011-11-28 08:16 128627人阅读 评论(1) 收藏 举报 分类: 版本控制(8) 版权声明 ...
- MongoDB 征途
到目前为止,对数据库这块仍然捉襟见肘,仅限于懂一些MySQL,就更谈不上什么优化了. 细想来,还是没有项目驱动造成的...既然跟关系型数据库缘分未到,干脆直接go to NoSQL - MongoDB ...
- ubuntu 安装后的配置
osx 下用 vmware 安装了一个 ubuntu 虚拟机,版本是 14.04 server.安装完之后要做一系列配置,记录如下. 配置 Android 编译环境 sudo apt-get inst ...
- 当CSDN携手Markdown
当CSDN携手Markdown Tags: CSDN Markdown 当CSDN携手Markdown Markdown CSDN-Markdown 也不知道是不是基于 Github 崛起的因素,Ma ...
- JMeter中使用Put请求方式请求接口
前言 现在有如下接口,是以PUT的方式请求的: 请求URL:IP+Port+/api/v1/apps/{appId} 请求参数: 参数名 必选 类型 nameCn 是 string nameEn 是 ...
- ReboletricSample工程搭建
受到 Just Say No to More End-to-End Tests 文章链接:http://googletesting.blogspot.tw/2015/04/just-say-no-t ...
- Android 一键清理动画
版本号:1.0 日期:2014.7.29 2014.7.30 版权:© 2014 kince 转载注明出处 一键清理是非常多Launcher都会带有的功能,其效果也比較美观.实现方式或许有非常多 ...
- 【BZOJ4293】[PA2015]Siano 线段树
[BZOJ4293][PA2015]Siano Description 农夫Byteasar买了一片n亩的土地,他要在这上面种草. 他在每一亩土地上都种植了一种独一无二的草,其中,第i亩土地的草每天会 ...
- 微信分享配置(js-sdk)
现在的微信分享给朋友-分享到朋友圈 链接带有自定义的title.描述.图片,需要配置js-sdk(地址:mp.weixin.qq.com)微信文档 需要后台配置config的参数,返回给前台 1)de ...