Flutter for OpenHarmony 实战之基础组件：第十一篇 BottomNavigationBar 与 TabBar 多页切换

优质文章学习记录

— 5 min read
Flutter for OpenHarmony 实战之基础组件：第十一篇 BottomNavigationBar 与 TabBar 多页切换
在这里插入图片描述

Flutter for OpenHarmony 实战之基础组件：第十一篇 BottomNavigationBar 与 TabBar 多页切换

摘要：一个复杂的 App 通常包含多个功能模块。本文将深入讲解 Flutter 中最核心的两种多页切换模式：底部导航 (BottomNavigationBar) 和顶部选项卡 (TabBar)。我们将探讨 Material 3 风格的新组件 NavigationBar，解决页面切换时的状态丢失问题，并适配鸿蒙系统的底部手势条。

前言

打开你手机里的微信、淘宝或抖音，你会发现它们都有一个共同的架构：底部有 4-5 个图标，点击切换不同的主页面；顶部可能还有“关注/推荐/热榜”这样的分类切换。

这就是移动端最经典的 “底 Tab + 顶 Tab” 双导航架构。

本文你将学到：

  • BottomNavigationBar (经典) 与 NavigationBar (Material 3) 的区别
  • TabBar + TabBarView 实现滑动切换
  • 核心难点：如何让页面在切换后不重置？(AutomaticKeepAliveClientMixin)
  • 鸿蒙适配：底部导航栏如何避开系统手势条 (Home Indicator)

一、底部导航：App 的根基

Flutter 提供了两种主流的底部导航组件。

在这里插入图片描述

1.1 经典款：BottomNavigationBar

这是最传统、兼容性最好的组件。

classMainPageextendsStatefulWidget{constMainPage({super.key});@overrideState<MainPage>createState()=>_MainPageState();}class _MainPageState extendsState<MainPage>{ int _currentIndex =0;// 页面列表finalList<Widget> _pages =[constHomePage(),constCategoryPage(),constProfilePage(),];@overrideWidgetbuild(BuildContext context){returnScaffold( body: _pages[_currentIndex],// 根据下标显示对应页面 bottomNavigationBar:BottomNavigationBar( currentIndex: _currentIndex, onTap:(index)=>setState(()=> _currentIndex = index), type:BottomNavigationBarType.fixed,// 超过3个item必须设置fixed selectedItemColor:Colors.blue, unselectedItemColor:Colors.grey, items:const[BottomNavigationBarItem(icon:Icon(Icons.home), label:'首页'),BottomNavigationBarItem(icon:Icon(Icons.category), label:'发现'),BottomNavigationBarItem(icon:Icon(Icons.person), label:'我的'),],),);}}

1.2 新潮款：NavigationBar (M3)

Material 3 引入了更高、更圆润的 NavigationBar。它自带点击涟漪和胶囊状的指示器，视觉效果更好。

NavigationBar( selectedIndex: _currentIndex, onDestinationSelected:(index)=>setState(()=> _currentIndex = index), destinations:const[NavigationDestination( icon:Icon(Icons.home_outlined), selectedIcon:Icon(Icons.home), label:'首页',),NavigationDestination( icon:Icon(Icons.explore_outlined), selectedIcon:Icon(Icons.explore), label:'发现',),// ...],)

二、顶部选项卡：TabBar

TabBar 通常用于在同一个主栏目下，切换不同的子分类（如新闻 App 的频道）。它必须配合 TabController 使用。

在这里插入图片描述

2.1 DefaultTabController (推荐)

最简单的方法是在父级包裹一个 DefaultTabController，这样我们就不用手动管理 Controller 了。

classNewsPageextendsStatelessWidget{constNewsPage({super.key});@overrideWidgetbuild(BuildContext context){returnDefaultTabController( length:3,// Tab 数量 child:Scaffold( appBar:AppBar( title:constText('资讯'), bottom:constTabBar( tabs:[Tab(text:'推荐'),Tab(text:'科技'),Tab(text:'体育'),],),), body:constTabBarView( children:[Center(child:Text('推荐内容列表')),Center(child:Text('科技内容列表')),Center(child:Text('体育内容列表')),],),),);}}

三、核心难点：页面状态保持

在这里插入图片描述

默认情况下，当你从“首页”切换到“我的”，再切回“首页”时，首页会被重建（列表滚动位置丢失，输入框清空）。这是因为 Scaffold.body 直接替换了 Widget。

3.1 解决方案：IndexedStack

如果你希望所有页面在初始化后一直存在，可以使用 IndexedStack。它会一次性加载所有页面（注意内存消耗）。

// 修改 Scaffold body body:IndexedStack( index: _currentIndex, children: _pages,// 所有页面都会被保留在 Widget 树中，只是不可见),

3.2 解决方案：AutomaticKeepAliveClientMixin

如果你使用的是 PageView 或 TabBarView，更推荐让子页面自己决定是否保持状态。

classHomePageextendsStatefulWidget{constHomePage({super.key});@overrideState<HomePage>createState()=>_HomePageState();}// 1. 混入 AutomaticKeepAliveClientMixinclass _HomePageState extendsState<HomePage>withAutomaticKeepAliveClientMixin{// 2. 重写 wantKeepAlive 返回 true@override bool get wantKeepAlive =>true;@overrideWidgetbuild(BuildContext context){super.build(context);// 3. 必须调用 super.buildreturnListView.builder( itemCount:100, itemBuilder:(c, i)=>ListTile(title:Text('Item $i')),);}}

四、OpenHarmony 鸿蒙适配专题

在这里插入图片描述

4.1 底部导航栏与手势条

现在的鸿蒙手机（如 Mate 60）默认开启全面屏手势，底部有一条“黑条”或“白条” (Home Indicator)。

如果你的 BottomNavigationBar 高度写死，或者没有适配 SafeArea，底部的图标可能会被这个手势条遮挡。

Flutter 的 Scaffold + BottomNavigationBar 默认已经处理了 SafeArea。但如果你使用了自定义的底部栏（比如 Stack 里的 Positioned），务必包裹 SafeArea 并设置 bottom: true。

Align( alignment:Alignment.bottomCenter, child:SafeArea( child:Container( height:60, color:Colors.white, child:Row(...),),),)

五、总结

搭建一个 App 的骨架，核心就是“一底一顶”。

核心要点

  1. 底部导航：推荐使用 M3 风格的 NavigationBar，视觉更现代。
  2. 顶部 Tab：使用 DefaultTabController 配合 TabBarView 最省事。
  3. 状态保持：不想每次切换都重加载？请记住 IndexedStack (简单粗暴) 或 AutomaticKeepAliveClientMixin (精细控制)。
  4. 鸿蒙适配：时刻留意底部的安全区域，不要让按钮贴底太近。

下一篇预告

基本的页面结构都有了，但是我们现在的布局还是太“循规蹈矩”了（一行一列）。如果我要做一个 Pinterest 那样的瀑布流，或者像相册一样的网格呢？
《Flutter for OpenHarmony 实战之基础组件：第十二篇 GridView 网格布局详解》
我们将突破线性布局的限制，探索二维空间的布局艺术。

🌐 欢迎加入开源鸿蒙跨平台社区：开源鸿蒙跨平台开发者社区

Read more

无人机遥感航拍巡检数据集 无人机遥感图像识别 无人机视角山区泥石流和滑坡图像识别数据集-数据集第10067期

无人机遥感航拍巡检数据集 无人机遥感图像识别 无人机视角山区泥石流和滑坡图像识别数据集-数据集第10067期

滑坡检测数据集核心信息介绍 ** 这个滑坡检测数据集主要用于目标检测任务，整体数据规模和细节都比较明确。从数量上看，数据集总共包含 1660 张图像， 往期热门主题 主题搜两字"关键词"直达 代码数据获取： 获取方式：***文章底部卡片扫码获取*** 覆盖了YOLO相关项目、OpenCV项目、CNN项目等所有类别， 覆盖各类项目场景(包括但不限于以下----欢迎咨询定制)： 项目名称项目名称基于YOLO+deepseek 智慧农业作物长势监测系统基于YOLO+deepseek 人脸识别与管理系统基于YOLO+deepseek 无人机巡检电力线路系统基于YOLO+deepseek PCB板缺陷检测基于YOLO+deepseek 智慧铁路轨道异物检测系统基于YOLO+deepseek 102种犬类检测系统基于YOLO+deepseek 人脸面部活体检测基于YOLO+deepseek 无人机农田病虫害巡检系统基于YOLO+deepseek 水稻害虫检测识别基于YOLO+deepseek 安全帽检测系统基于YOLO+deepseek 智慧铁路接触网状态检测系统基于YOLO+
AI 编程：自动化代码生成、低代码 / 无代码开发、算法优化实践

AI 编程：自动化代码生成、低代码 / 无代码开发、算法优化实践

前言 AI 编程是人工智能技术与软件工程深度融合的产物，是未来软件开发的核心趋势之一。它并非简单的「代码补全」，而是通过大语言模型、深度学习、自动化引擎等技术，实现从需求到代码的自动化生成、低门槛可视化的低代码 / 无代码开发、已有代码 / 算法的智能优化与性能提升三大核心能力。AI 编程的本质是「解放开发者生产力」—— 让开发者从重复的 CURD、固定范式的编码、繁琐的调优工作中抽离，将精力聚焦于业务逻辑设计、架构规划、核心算法创新等高价值工作。 本文将系统性讲解 AI 编程三大核心方向，全程搭配可运行完整代码、Mermaid 标准流程图、高可用 Prompt 工程示例、数据图表、技术架构图，兼顾理论深度与落地实践，所有内容均可直接复用。 一、AI 自动化代码生成：从自然语言到可执行代码的全链路生成 1.1 核心定义与技术原理 AI 自动化代码生成，是指基于大语言模型（LLM）的代码生成能力，开发者通过「
目标检测数据集——无人机视觉VisDrone数据集

目标检测数据集——无人机视觉VisDrone数据集

随着无人机技术的飞速发展，无人机在航拍、监控、农业、物流等领域的应用日益广泛。与此同时，无人机视角下的视觉任务，如目标检测、目标跟踪和场景理解，也成为了计算机视觉研究的热点。然而，相比传统的地面视角数据集，无人机视角下的图像具有高度变化、小目标密集、复杂背景等独特挑战，这对现有算法提出了更高的要求。 为了应对这些挑战并推动无人机视觉技术的发展，天津大学机器学习与数据挖掘实验室推出了 VisDrone数据集。作为一个大规模、标注精细的无人机视觉数据集，VisDrone 不仅涵盖了丰富的场景和多样化的目标类别，还为研究人员提供了一个极具挑战性的测试平台。无论是小目标检测的精度提升，还是密集场景下的鲁棒性优化，VisDrone 都成为了学术界和工业界不可或缺的资源。该数据集采集自中国14个不同城市，覆盖复杂城市场景、交通枢纽、密集人群等多种环境。 VisDrone官方Github下载渠道可点击访问： https://github.com/VisDrone/VisDrone-Dataset?tab=readme-ov-file 下载的数据集为VisDrone2019-DET-train