七、Flutter优化Tabbar

最新推荐文章于 2024-03-22 16:16:42 发布

星星编程888

最新推荐文章于 2024-03-22 16:16:42 发布

阅读量525

点赞数

分类专栏： Flutter 文章标签： Flutter iOS Android 前端跨平台

本文链接：https://blog.youkuaiyun.com/qq_14949409/article/details/97030793

版权

本文主要探讨了Flutter中Tabbar的优化，包括底部Tabbar和顶部Tabbar的问题及解决方案。作者指出，底部Tabbar切换时会导致页面销毁并重新加载，造成资源浪费。为解决这一问题，建议使用IndexedStack避免重复渲染。顶部Tabbar则通过AutomaticKeepAliveClientMixin防止子页面重复刷新。通过这些优化措施，可以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

底部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:Bot