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实现滑动切换
344 0
|
Dart JavaScript 安全
Flutter State Management状态管理全面分析(二)
Flutter State Management状态管理全面分析
237 0
Flutter State Management状态管理全面分析(二)
|
算法 前端开发 JavaScript
Flutter State Management状态管理全面分析(一)
Flutter State Management状态管理全面分析
548 0
Flutter State Management状态管理全面分析(一)
|
Dart IDE 开发工具
Flutter框架对热重载在项目里的深度运用,状态热重新加载以及静态字段被延迟初始化【Flutter】
Flutter框架对热重载在项目里的深度运用,状态热重新加载以及静态字段被延迟初始化【Flutter】
【Flutter】当项目中使用交互并且使用小工具管理其状态widget的state的详解
【Flutter】当项目中使用交互并且使用小工具管理其状态widget的state的详解
|
Java Android开发
Flutter(八)——状态管理(二)
Flutter(八)——状态管理(二)
268 0
Flutter(八)——状态管理(二)
|
JavaScript 前端开发 Java
Flutter(八)——状态管理(一)
Flutter(八)——状态管理(一)
504 0
Flutter(八)——状态管理(一)
|
前端开发 JavaScript Android开发
Flutter | 关于状态管理,别再被吓着了
本篇是带大家了解并明白 Flutter 中状态管理相关,着眼与实际应用与通俗(说人话)解释,杜绝概念连篇 ❎ 。
141 0
|
存储 Dart 监控
Flutter(二)之有状态的StatefulWidget
在开发中,某些Widget情况下我们展示的数据并不是一层不变的: 比如Flutter默认程序中的计数器案例,点击了+号按钮后,显示的数字需要+1; 比如在开发中,我们会进行下拉刷新、上拉加载更多,这时数据也会发生变化; 而StatelessWidget通常用来展示哪些数据固定不变的,如果数据会发生改变,我们使用StatefulWidget;
326 1
Flutter(二)之有状态的StatefulWidget
|
移动开发 Android开发 索引
flutter之从零开始搭建(一)之 BottomNavigationBar
flutter之从零开始搭建(一)之 BottomNavigationBar
173 0
flutter之从零开始搭建(一)之 BottomNavigationBar