上一篇讲到了

Flutter - BottomNavigationBar底部导航栏切换后,状态丢失

里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失。毕竟大家99%的情况都是不让其状态丢失,谷歌就不能默认这个选项吗??

先看一个没有保存状态的例子:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
} class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title; @override
_MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> { final List<String> _list = ['111111', '222222', '333333'];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _list.length,
child: Scaffold(
appBar: AppBar(
title: Text(
"TabBar Status Test",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
centerTitle: true,
bottom: TabBar(
isScrollable: false,
tabs: _list.map((String ss) {
return Tab(text: ss);
}).toList(),
),
),
body: TabBarView(
children: <Widget>[TextField(), TextField(), TextField()],
),
),
);
}
}

很简单,一个标签页,每一个标签页下面都有一个文本框,你可以输入文字。

但是切换标签页后,文字丢失。正如预期的那样。

下面我们把TextField但是拿出来,新建一个page1.dart文件,代码

注意紫色字体部分 AutomaticKeepAliveClientMixin

import 'package:flutter/material.dart';

class Page1 extends StatefulWidget {
@override
_Page1State createState() => _Page1State();
} class _Page1State extends State<Page1> with AutomaticKeepAliveClientMixin {
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
return Center(
child: TextField(),
);
}
}

Page2 和 Page3 同理。

然后再main.dart中引用

import 'page1.dart';
import 'page2.dart';
import 'page3.dart';

修改

body: TabBarView(
children: <Widget>[Page1(), Page2(), Page3()],
),

这样一来,再输入文字以后,切换标签,状态仍然保持!

Flutter - TabBar导航栏切换后,状态丢失的更多相关文章

  1. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

  2. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部

    import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...

  3. Flutter实战视频-移动电商-04.底部导航栏切换效果

    04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...

  4. 极致精简的fragment实现导航栏切换demo

    一个小demo.用button+fragment实现导航栏切换界面,适合刚接触的新手看一下. 效果图 点击第二个后 源码: 主界面 <span style="font-size:18p ...

  5. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

  6. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

  7. android 自定义adapter和线程结合 + ListView中按钮滑动后状态丢失解决办法

    adapter+线程 1.很多时候自定义adapter的数据都是来源于服务器的,所以在获取服务器的时候就需要异步获取,这里就需要开线程了(线程池)去获取服务器的数据了.但这样有的时候adapter的中 ...

  8. mui底部导航栏切换分页

    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...

  9. Flutter 底部导航栏bottomNavigationBar

    实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...

随机推荐

  1. Python中DataFrame关联

    df = pd.merge( df, # 左 wzplbm, # 右 left_on = ['WZBM','ZBWZMC'], # 左DataFrame匹配列 right_on = ['WZPLBM' ...

  2. MongoDB的安装与python操作MongoDB

    一.安装MongoDB 因为我个人使用的是windows,就只记录下windows下的安装 1.下载安装 就是官网,下载msi,选个路径安装 2.配置 看见别的地方说需要手动在bin同级目录创建dat ...

  3. Linux下的sysfs与udev的关系是什么?

    sysfs  sysfs 把连接在系统上的设备和总线组织成为一个分级的文件,它们可以被从用户的空间存取到.简单介绍sysfs文件系统,您可能想知道 sysfs 是怎么认出系统中存在的设备以及应该使用什 ...

  4. 3.1Python数据处理篇之Numpy系列(一)---ndarray对象的属性与numpy的数据类型

    目录 目录 (一)简单的数组创建 1.numpy的介绍: 2.numpy的数组对象ndarray: 3.np.array(list/tuple)创建数组: (二)ndarray对象的属性 1.五个常用 ...

  5. Hbase-2.0.0_02_常用操作

    主要是常用的hbase shell命令,包括表的创建与删除,表数据的增删查[hbase没有修改]:以及hbase的导出与导入. 参考教程:HBase教程 参考博客:hbase shell基础和常用命令 ...

  6. 2018. first week now at home

    外面雪刚停. 现在是2018.1.5 2018 needs to consider next steps了.未雨绸缪啊     下面是2017年last working day   外面黑了,水面上黑 ...

  7. java调用Linux执行Python爬虫,并将数据存储到elasticsearch中--(java后台代码)

    该篇博客主要是java代码,如需相应脚本及java连接elasticsearch工具类代码,请移步到上一篇博客(https://www.cnblogs.com/chenyuanbo/p/9973685 ...

  8. creo5.0安装教程(图文详解)

    PTC公司最近发布了Creo 5.0正式版 ,作为最具其革命性的新一代产品设计软件,其所提供专业的二维和三维设计设计,能帮助企业和公司进行产品生命周期管理(PLM)和制定服务管理解决方案.Creo5. ...

  9. 【知识碎片】Mysql语句

    (1)mysql 更新最新的一条记录  ;

  10. Note 387206.1 ORA-15041: ASM diskgroup with unlike disks sizes

    Applies to: Oracle Server - Enterprise Edition - Version: 10.1.0.2 to 10.2.0.1 - Release: 10.1 to 10 ...