当前位置：首页 > news >正文

FlutterOpenHarmony底部导航栏组件开发

news 2026/5/11 16:46:23

前言

底部导航栏是移动应用中最常见的导航模式之一，它将应用的主要功能模块以图标和文字的形式展示在屏幕底部，用户可以通过点击快速切换不同的页面。在笔记应用中，底部导航栏通常包含笔记列表、分类、搜索、设置等核心功能入口。本文将详细介绍如何在Flutter和OpenHarmony平台上实现功能完善的底部导航栏组件，帮助开发者构建清晰的应用导航结构。

Flutter底部导航栏基础

Flutter提供了BottomNavigationBar组件实现底部导航功能。

classMainPageextendsStatefulWidget{@override_MainPageStatecreateState()=>_MainPageState();}class_MainPageStateextendsState<MainPage>{int _currentIndex=0;finalList<Widget>_pages=[NotesPage(),CategoriesPage(),SearchPage(),SettingsPage(),];}

底部导航栏需要配合页面切换使用，通常在StatefulWidget中管理当前选中的索引。_currentIndex记录当前选中的导航项索引，_pages列表存储各个导航项对应的页面Widget。这种设计将导航状态和页面内容分离，使得代码结构更加清晰。当用户点击导航项时，更新_currentIndex即可切换到对应的页面。

@overrideWidgetbuild(BuildContext context){returnScaffold(body:_pages[_currentIndex],bottomNavigationBar:BottomNavigationBar(currentIndex:_currentIndex,type:BottomNavigationBarType.fixed,selectedItemColor:Colors.blue,unselectedItemColor:Colors.grey,onTap:(index){setState((){_currentIndex=index;});},items:[BottomNavigationBarItem(icon:Icon(Icons.note),label:'笔记'),BottomNavigationBarItem(icon:Icon(Icons.folder),label:'分类'),BottomNavigationBarItem(icon:Icon(Icons.search),label:'搜索'),BottomNavigationBarItem(icon:Icon(Icons.settings),label:'设置'),],),);}

BottomNavigationBar通过items属性定义导航项列表，每个BottomNavigationBarItem包含图标和标签。currentIndex绑定当前选中的索引，onTap回调处理点击事件。type设置为fixed确保所有导航项始终显示标签，当导航项超过3个时这个设置很重要。selectedItemColor和unselectedItemColor分别设置选中和未选中状态的颜色，通过颜色差异让用户清楚地知道当前所在的页面。

带动画的页面切换

使用PageView可以实现带滑动动画的页面切换。

class_MainPageStateextendsState<MainPage>{int _currentIndex=0;finalPageController _pageController=PageController();@overrideWidgetbuild(BuildContext context){returnScaffold(body:PageView(controller:_pageController,onPageChanged:(index){setState((){_currentIndex=index;});},children:_pages,),bottomNavigationBar:BottomNavigationBar(currentIndex:_currentIndex,onTap:(index){_pageController.animateToPage(index,duration:Duration(milliseconds:300),curve:Curves.easeInOut,);},items:_navItems,),);}}

PageView配合PageController可以实现页面的滑动切换效果。onPageChanged回调在页面切换时更新_currentIndex，保持底部导航栏的选中状态同步。点击导航项时调用animateToPage方法，通过动画平滑地切换到目标页面。duration设置动画时长，curve设置动画曲线。这种实现方式让用户既可以点击导航项切换页面，也可以左右滑动切换，提供了更丰富的交互方式。

OpenHarmony底部导航实现

OpenHarmony使用Tabs组件实现底部导航功能。

@Entry @Component struct MainPage{@State currentIndex:number=0privatetabsController:TabsController=newTabsController()build(){Tabs({barPosition:BarPosition.End,controller:this.tabsController}){TabContent(){NotesPage()}.tabBar(this.TabBarBuilder('笔记',$r('app.media.icon_notes'),0))TabContent(){CategoriesPage()}.tabBar(this.TabBarBuilder('分类',$r('app.media.icon_folder'),1))TabContent(){SearchPage()}.tabBar(this.TabBarBuilder('搜索',$r('app.media.icon_search'),2))TabContent(){SettingsPage()}.tabBar(this.TabBarBuilder('设置',$r('app.media.icon_settings'),3))}.onChange((index:number)=>{this.currentIndex=index})}}

OpenHarmony的Tabs组件是一个功能强大的标签页容器。barPosition设置为BarPosition.End将标签栏放置在底部，实现底部导航的效果。TabsController用于程序化控制标签切换。每个TabContent代表一个页面，tabBar属性设置对应的标签栏项。onChange回调在标签切换时更新currentIndex状态。这种声明式的写法使得导航结构一目了然。

@BuilderTabBarBuilder(title:string,icon:Resource,index:number){Column(){Image(icon).width(24).height(24).fillColor(this.currentIndex===index?'#1890FF':'#999999')Text(title).fontSize(12).fontColor(this.currentIndex===index?'#1890FF':'#999999').margin({top:4})}.width('100%').height(50).justifyContent(FlexAlign.Center)}

@Builder装饰器定义可复用的标签栏项构建函数。Column垂直排列图标和文字，通过比较currentIndex和当前项的index来决定显示选中还是未选中的颜色。fillColor属性设置图标的填充颜色，fontColor设置文字颜色。这种根据状态动态设置颜色的方式提供了清晰的视觉反馈，让用户知道当前选中的是哪个标签。

自定义底部导航栏

有时需要自定义底部导航栏的样式以满足设计需求。

Container(height:60,decoration:BoxDecoration(color:Colors.white,boxShadow:[BoxShadow(color:Colors.black.withOpacity(0.1),blurRadius:10,offset:Offset(0,-2),),],),child:Row(mainAxisAlignment:MainAxisAlignment.spaceAround,children:List.generate(4,(index){return_buildNavItem(index);}),),)

自定义底部导航栏使用Container作为容器，通过BoxDecoration设置背景色和阴影效果。阴影的offset设置为负值使阴影向上投射，营造导航栏浮起的视觉效果。Row组件水平排列导航项，spaceAround使各项均匀分布。List.generate根据导航项数量生成对应的Widget列表。这种自定义方式可以完全控制导航栏的外观和行为。

Widget_buildNavItem(int index){finalisSelected=_currentIndex==index;finalicons=[Icons.note,Icons.folder,Icons.search,Icons.settings];finallabels=['笔记','分类','搜索','设置'];returnGestureDetector(onTap:()=>setState(()=>_currentIndex=index),child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(icons[index],color:isSelected?Colors.blue:Colors.grey,size:24,),SizedBox(height:4),Text(labels[index],style:TextStyle(color:isSelected?Colors.blue:Colors.grey,fontSize:12,),),],),);}

导航项的构建根据选中状态显示不同的颜色。GestureDetector处理点击事件，更新_currentIndex触发页面切换。Column垂直排列图标和文字，mainAxisAlignment设置为center使内容垂直居中。通过数组存储图标和标签数据，根据index获取对应的值，这种数据驱动的方式使得添加或修改导航项变得简单。

中间凸起按钮

一些应用设计中底部导航栏中间有一个凸起的按钮。

Scaffold(floatingActionButton:FloatingActionButton(onPressed:_createNewNote,child:Icon(Icons.add),),floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked,bottomNavigationBar:BottomAppBar(shape:CircularNotchedRectangle(),notchMargin:8,child:Row(mainAxisAlignment:MainAxisAlignment.spaceAround,children:[IconButton(icon:Icon(Icons.note),onPressed:(){}),IconButton(icon:Icon(Icons.folder),onPressed:(){}),SizedBox(width:48),IconButton(icon:Icon(Icons.search),onPressed:(){}),IconButton(icon:Icon(Icons.settings),onPressed:(){}),],),),)

FloatingActionButton配合BottomAppBar可以实现中间凸起按钮的效果。floatingActionButtonLocation设置为centerDocked将按钮放置在底部导航栏中间。BottomAppBar的shape设置为CircularNotchedRectangle会在按钮位置创建一个圆形缺口。Row中间的SizedBox为按钮预留空间。这种设计常用于突出显示最重要的操作，如创建新笔记。