Flutter:让BottomNavigationBar保持状态

简介: 版本所有,转载请注明出处。@有问题。如果有关注过我的同学可能看过我之前的一篇名为Flutter学习笔记:BottomNavigationBar实现多个Navigation的文章,这篇文章主要是介绍了通过Navigation实现保持住让BottomNavigationBar页面的状态,从而避免在BottomNavigationBar切换时导致页面重新initState。

版本所有,转载请注明出处

@有问题。
如果有关注过我的同学可能看过我之前的一篇名为Flutter学习笔记:BottomNavigationBar实现多个Navigation的文章,这篇文章主要是介绍了通过Navigation实现保持住让BottomNavigationBar页面的状态,从而避免在BottomNavigationBar切换时导致页面重新initState。但这么做有一个严重的问题,就是当我们在对应页面执行Navigator.push()时,也就是跳转页面时,BottomNavigationBar 始终保持在页面底部,如下图:

img_b9504d28a77864f390caccefeb4d8f17.png
image.png

显然这不是我们想要的结果。经过努力,我偶然发现了一个解决方法,以官方的 Gallery为例:

    return new FadeTransition(
      opacity: _animation,
      child: new SlideTransition(
        position: new Tween<Offset>(
          begin: const Offset(0.0, 0.02), // Slightly down.
          end: Offset.zero,
        ).animate(_animation),
        child: new IconTheme(
          data: new IconThemeData(
            color: iconColor,
            size: 120.0,
          ),
          child: new Semantics(
            label: 'Placeholder for $_title tab',
            child: _buildChild(),
          ),
        ),
      ),
    );

这是官方的原代码,要想让页面保持住状态仅需要添加一个Key:

    return new FadeTransition(
      key: ObjectKey("$_title"),
      opacity: _animation,
      child: new SlideTransition(
        position: new Tween<Offset>(
          begin: const Offset(0.0, 0.02), // Slightly down.
          end: Offset.zero,
        ).animate(_animation),
        child: new IconTheme(
          data: new IconThemeData(
            color: iconColor,
            size: 120.0,
          ),
          child: new Semantics(
            label: 'Placeholder for $_title tab',
            child: _buildChild(),
          ),
        ),
      ),
    );

这样每次BottomNavigationBar切换的时候就不会丢失状态了,怎么样你的问题解决了吗?

目录
相关文章
Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换
Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换
308 0
|
Dart JavaScript 安全
Flutter State Management状态管理全面分析(二)
Flutter State Management状态管理全面分析
217 0
Flutter State Management状态管理全面分析(二)
|
算法 前端开发 JavaScript
Flutter State Management状态管理全面分析(一)
Flutter State Management状态管理全面分析
498 0
Flutter State Management状态管理全面分析(一)
|
Dart IDE 开发工具
Flutter框架对热重载在项目里的深度运用,状态热重新加载以及静态字段被延迟初始化【Flutter】
Flutter框架对热重载在项目里的深度运用,状态热重新加载以及静态字段被延迟初始化【Flutter】
【Flutter】当项目中使用交互并且使用小工具管理其状态widget的state的详解
【Flutter】当项目中使用交互并且使用小工具管理其状态widget的state的详解
|
Java Android开发
Flutter(八)——状态管理(二)
Flutter(八)——状态管理(二)
226 0
Flutter(八)——状态管理(二)
|
JavaScript 前端开发 Java
Flutter(八)——状态管理(一)
Flutter(八)——状态管理(一)
483 0
Flutter(八)——状态管理(一)
|
前端开发 JavaScript Android开发
Flutter | 关于状态管理,别再被吓着了
本篇是带大家了解并明白 Flutter 中状态管理相关,着眼与实际应用与通俗(说人话)解释,杜绝概念连篇 ❎ 。
119 0
|
移动开发 Android开发 索引
flutter之从零开始搭建(一)之 BottomNavigationBar
flutter之从零开始搭建(一)之 BottomNavigationBar
140 0
flutter之从零开始搭建(一)之 BottomNavigationBar
flutter系列之:用来管理复杂状态的State详解
Flutter的基础是widget,根据是否需要跟用户进行交互,widget则可以分为StatelessWidget和StatefulWidget。StatelessWidget只能根据传入的状态进行简单的初始化widget,如果要实现跟用户交互这种复杂的功能,则需要用到StatefulWidget。 但是对于StatefulWidget本身来说,它并不存储任何状态,所有的状态都是存放在和StatefulWidget关联的State中的。