七、Flutter优化Tabbar

目录
一、Tabbar问题
二、底部Tabbar
三、顶部Tabbar

最近一直忙于基于FreeSwitch的Sip融合通信了,没有及时更新文章。技术的更新太快了,每天都会出现各种框架和技术技巧,是学不完的,也只能先精通一种语言,然后熟练应用于工作中,这个时候可以学一些相关的技术,就显得你比较牛了。闲言少叙,言归正传,今天介绍如何优化Tabbar并没有从底层分析,只是快速解决了这类问题。

一、Tabbar问题

先看我写的《六、Flutter自定义Tabbar》,效果图如下:


Tabbar.jpg

底部Tabbar切换时currentPage会被销毁,重新加载页面。底部Tabbar每切换一次,就请求一次网络,造成了资源浪费,用户体验也比较差。
顶部Tabbar和底部Tabbar存在的问题几乎一样,都是切换时页面重复刷新。

二、底部Tabbar
底部Tabbar只需要currentPage不重复渲染就可以了,可以使用IndexedStack来解决这个问题。

页面重复渲染的代码:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        type:BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items:_bottomTabs,
        onTap: (index){
          setState(() {
           currentIndex = index;
           currentPage = _tabs[currentIndex]; 
          });
        },
       fixedColor: Colors.green,
      ),
      body:currentPage
    );
  }

缓存页面的代码:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        type:BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items:_bottomTabs,
        onTap: (index){
          setState(() {
           currentIndex = index;
          });
        },
       fixedColor: Colors.green,
      ),
      body:IndexedStack(
        children: <Widget>[
           TopBarPage(),
           AudioBook(),
           Team(),
           Fair(),
           Mine()
        ],
        index: currentIndex,
      )
    );
  }

三、顶部Tabbar
顶部Tabbar加载子页面使用的是TabBarView,这里使用AutomaticKeepAliveClientMixin保证子页面不再重复渲染。

class Home extends StatefulWidget {
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    super.build(context);
    .....................................
    .....................................
    .....................................
}

  @override
  bool get wantKeepAlive => true;
}

总结:这是我写关于Flutter的第七篇文章了,对Flutter总算有个大概的了解了,算是入门了。接下来会写一些原理性的文章,或者写一些小的Widget,希望在阅读的你早日掌握Flutter,成为Flutter大神。

关注公众号,查看更多内容.jpg

推荐阅读更多精彩内容