文档章节

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

o
 osc_w9s1w4o0
发布于 2019/03/29 22:32
字数 409
阅读 10
收藏 0

精选30+云产品,助力企业轻松上云!>>>

如果你用过BottomNavigationBarTabBar、还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失。

要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后,想再看一下下头的数据,但是Flutter给你重回页面了。。。

这谁能顶得住啊。

 

 

看了一下解释,原来Flutter中为了节约内存不会保存widget的状态,widget都是临时变量。

不过还是有很多办法解决的,网上传言用 AutomaticKeepAliveClientMixin 配合

@override
bool get wantKeepAlive => true;

 

服用,效果会达到保持状态。但是这个方法貌似只对TabBar起作用,BottomNavigationBar 对 AutomaticKeepAliveClientMixin 有免疫,不起作用。

 

后来一顿猛于虎的番羽土啬操作后,还是找到了解决方案,完美实现BottomNavigationBar底部导航栏切换,状态保持。

 

答案就是body使用IndexedStack即可。

 

参考我的代码:

import 'package:flutter/material.dart';

import './pages/home_page.dart';
import './pages/book_page.dart';
import 'package:bottom_nav_bar_test/pages/movie_page.dart';
import 'package:bottom_nav_bar_test/pages/music_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation',
      home: Main(),
      theme: ThemeData(primaryColor: Colors.orange),
    );
  }
}

class Main extends StatefulWidget {
  @override
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {
  int _currentIndex = 0;
  final List<Widget> _children = [Home(), Book(), Music(), Movie()];

  final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.book),
        title: Text('Book'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.music_video),
        title: Text('Music'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.movie),
        title: Text('Movie'),
        //backgroundColor: Colors.orange
        ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: _list,
      ),
      //body: _children[_currentIndex],
      body: IndexedStack(
        index: _currentIndex,
        children: _children,
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

 

 

参考 https://stackoverflow.com/questions/53011686/flutter-automatickeepaliveclientmixin-is-not-working-with-bottomnavigationbar 中 hfimy 的回答。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

SnailSVN Pro for mac(SVN客户端) v1.9.9

macw为您带来SnailSVN Pro for mac ,SnailSVN Mac版是一款类似于 TortoiseSVN 的 Apache Subversion(SVN)客户端,与 Finder 紧密集成。SnailSVN Mac版允许你从 Finder 的上下文菜单中快速...

单手绕月
13分钟前
0
0
python网络编程(进程与多线程)

multiprocessing模块   由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程。   multiprocessing包是Pytho...

osc_ky74f26k
13分钟前
0
0
CentOS7 redis5.0高可用部署

概述 Redis Sentinel为Redis提供高可用性。Redis Sentinel是一个分布式系统,Sentinel本身设计为在有多个Sentinel进程协同合作的配置中运行。具有多个Sentinel进程进行协作的优点如下: 1、当...

紅顏為君笑
14分钟前
0
0
Ocelot简易教程(四)之请求聚合以及服务发现

上篇文章给大家讲解了Ocelot的一些特性并对路由进行了详细的介绍,今天呢就大家一起来学习下Ocelot的请求聚合以及服务发现功能。希望能对大家有所帮助。 作者:依乐祝 原文地址:https://www...

osc_zo0djpuu
15分钟前
0
0
leetcode63(不同路径 II)--Java语言实现

求: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为“Finish”)。 现在...

拓拔北海
15分钟前
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部