鸿蒙多功能工具箱开发实战(二)-底部导航栏实现

鸿蒙多功能工具箱开发实战(二)-底部导航栏实现前言底部导航栏是移动应用中最常见的导航模式之一。本文将详细讲解如何在HarmonyOS中实现一个功能完善的底部导航栏包括多分类切换、状态管理、样式美化等核心功能。一、导航栏设计分析1.1 功能需求支持6个工具分类的切换当前选中项高亮显示点击切换对应分类页面平滑的视觉反馈效果1.2 UI设计图 1底部导航栏┌────────────────────────────────────────────┐ │ │ │ 页面内容区域 │ │ │ ├────────────────────────────────────────────┤ │ │ │ 计算 历法 换算 财务 行情 生活 │ └────────────────────────────────────────────┘二、状态管理设计2.1 定义分类枚举在common/AppConfig.ets中定义// 工具分类枚举exportenumToolCategory{CALCULATORcalculator,// 计算工具CALENDARcalendar,// 历法工具CONVERTconvert,// 换算工具FINANCEfinance,// 财务工具MARKETmarket,// 行情工具LIFElife// 生活工具}2.2 定义分类信息接口// 分类信息接口exportinterfaceCategoryInfo{category:ToolCategory// 分类标识name:string// 显示名称icon:string// 图标emojicolor:string// 主题色}2.3 定义分类数据// 主题颜色配置exportconstTHEME_COLORS{primary:#4A90E2,secondary:#50C878,background:#F5F5F5,card:#FFFFFF,text:#333333,textSecondary:#999999}// 获取分类列表exportfunctiongetToolCategories():CategoryInfo[]{return[{category:ToolCategory.CALCULATOR,name:计算,icon:,color:#4A90E2// 蓝色},{category:ToolCategory.CALENDAR,name:历法,icon:,color:#E74C3C// 红色},{category:ToolCategory.CONVERT,name:换算,icon:,color:#50C878// 绿色},{category:ToolCategory.FINANCE,name:财务,icon:,color:#FFB347// 橙色},{category:ToolCategory.MARKET,name:行情,icon:,color:#9B59B6// 紫色},{category:ToolCategory.LIFE,name:生活,icon:,color:#1ABC9C// 青色}]}三、底部导航栏组件实现3.1 组件结构设计创建components/BottomNavBar.etsimport{ToolCategory,CategoryInfo,THEME_COLORS,getToolCategories}from../common/AppConfig/** * 底部导航栏组件 * * 功能 * 1. 显示所有工具分类 * 2. 支持点击切换分类 * 3. 当前选中项高亮 */Componentexportstruct BottomNavBar{// 使用 Link 双向绑定当前分类LinkcurrentCategory:ToolCategorybuild(){Row(){// 遍历所有分类ForEach(getToolCategories(),(item:CategoryInfo){this.NavItem(item)})}.width(100%).height(56)// 标准导航栏高度.backgroundColor(#FFFFFF).shadow({radius:8,color:#1A000000,// 10%透明度的黑色offsetY:-2// 向上的阴影})}// 导航项组件BuilderNavItem(item:CategoryInfo){Column(){// 图标Text(item.icon).fontSize(24).fontWeight(this.currentCategoryitem.category?FontWeight.Bold:FontWeight.Normal)// 名称Text(item.name).fontSize(12).fontColor(this.currentCategoryitem.category?item.color:THEME_COLORS.textSecondary).margin({top:4})}.width(16.6%)// 6个分类每个约16.6%.height(100%).justifyContent(FlexAlign.Center).onClick((){this.currentCategoryitem.category})}}3.2 关键技术点解析Link 装饰器Link用于父子组件之间的双向数据同步// 父组件StatecurrentCategory:ToolCategoryToolCategory.CALCULATOR// 子组件接收LinkcurrentCategory:ToolCategory// 父组件传递使用 $ 前缀BottomNavBar({currentCategory:$currentCategory})ForEach 循环渲染ForEach(arr:Array,// 数据源itemGenerator:(item)void,// 渲染函数keyGenerator?:(item)string// 可选的key生成函数)条件样式// 根据条件动态设置样式.fontColor(this.currentCategoryitem.category?item.color// 选中使用分类颜色:THEME_COLORS.textSecondary// 未选中灰色)四、主页面集成4.1 主页面结构创建pages/Index.etsimport{BottomNavBar}from../components/BottomNavBarimport{ToolCategory,THEME_COLORS}from../common/AppConfigimport{CalculatorPage}from./CalculatorPageimport{CalendarPage}from./CalendarPageimport{ConvertPage}from./ConvertPageimport{FinancePage}from./FinancePageimport{MarketPage}from./MarketPageimport{LifePage}from./LifePage/** * 主页面 - 工具箱首页 */EntryComponentstruct Index{// 当前选中的分类StatecurrentCategory:ToolCategoryToolCategory.CALCULATORbuild(){Column(){// 内容区域Column(){// 根据当前分类显示对应页面if(this.currentCategoryToolCategory.CALCULATOR){CalculatorPage()}elseif(this.currentCategoryToolCategory.CALENDAR){CalendarPage()}elseif(this.currentCategoryToolCategory.CONVERT){ConvertPage()}elseif(this.currentCategoryToolCategory.FINANCE){FinancePage()}elseif(this.currentCategoryToolCategory.MARKET){MarketPage()}elseif(this.currentCategoryToolCategory.LIFE){LifePage()}}.width(100%).layoutWeight(1)// 占据剩余空间// 底部导航栏BottomNavBar({currentCategory:$currentCategory})}.width(100%).height(100%).backgroundColor(THEME_COLORS.background)}}4.2 布局关键技术layoutWeight 布局权重Column(){// 内容区域Column(){...}.layoutWeight(1)// 占据剩余所有空间// 导航栏BottomNavBar().height(56)// 固定高度}条件渲染// 使用 if-else 根据状态显示不同页面if(this.currentCategoryToolCategory.CALCULATOR){CalculatorPage()}elseif(this.currentCategoryToolCategory.CALENDAR){CalendarPage()}五、分类页面骨架5.1 计算工具页面创建pages/CalculatorPage.etsimport{ToolCard}from../components/ToolCardimport{THEME_COLORS}from../common/AppConfigimportrouterfromohos.router/** * 计算工具页面 */Componentexportstruct CalculatorPage{build(){Column(){// 页面标题Text(计算工具).fontSize(24).fontWeight(FontWeight.Bold).margin({top:20,bottom:20}).width(100%).padding({left:20})// 工具网格Grid(){GridItem(){ToolCard({name:亲戚称呼计算器,icon:‍‍‍,description:计算亲戚关系的称呼,color:#4A90E2,onCardClick:(){router.pushUrl({url:pages/calculator/RelativeCalculator})}})}// 更多工具卡片...}.columnsTemplate(1fr 1fr)// 两列布局.rowsGap(16)// 行间距.columnsGap(16)// 列间距.width(100%).padding({left:16,right:16,bottom:20}).layoutWeight(1)}.width(100%).height(100%)}}5.2 其他分类页面按照相同模式创建CalendarPage.ets- 历法工具ConvertPage.ets- 换算工具FinancePage.ets- 财务工具MarketPage.ets- 行情工具LifePage.ets- 生活工具六、样式优化6.1 添加选中动画效果Componentexportstruct BottomNavBar{LinkcurrentCategory:ToolCategorybuild(){Row(){ForEach(getToolCategories(),(item:CategoryInfo){Column(){Text(item.icon).fontSize(24).fontWeight(this.currentCategoryitem.category?FontWeight.Bold:FontWeight.Normal)// 添加缩放动画.scale({x:this.currentCategoryitem.category?1.1:1.0,y:this.currentCategoryitem.category?1.1:1.0}).animation({duration:200,curve:Curve.EaseInOut})Text(item.name).fontSize(12).fontColor(this.currentCategoryitem.category?item.color:THEME_COLORS.textSecondary).margin({top:4})}.width(16.6%).height(100%).justifyContent(FlexAlign.Center).onClick((){this.currentCategoryitem.category})})}.width(100%).height(56).backgroundColor(#FFFFFF).shadow({radius:8,color:#1A000000,offsetY:-2})}}图 2 选中计算工具效果6.2 添加点击涟漪效果Column(){// ... 内容}.width(16.6%).height(100%).justifyContent(FlexAlign.Center).onClick((){this.currentCategoryitem.category})// 添加点击态.backgroundColor(this.currentCategoryitem.category?#F0F0F0:#FFFFFF).borderRadius(8)七、完整代码7.1 AppConfig.ets 完整代码/** * 应用配置文件 * 包含分类定义、主题颜色、工具配置等 */// 工具分类枚举exportenumToolCategory{CALCULATORcalculator,CALENDARcalendar,CONVERTconvert,FINANCEfinance,MARKETmarket,LIFElife}// 分类信息接口exportinterfaceCategoryInfo{category:ToolCategory name:stringicon:stringcolor:string}// 工具项接口exportinterfaceToolItem{id:stringname:stringicon:stringdescription:stringcolor:stringcategory:ToolCategory route:string}// 主题颜色配置exportconstTHEME_COLORS{primary:#4A90E2,secondary:#50C878,background:#F5F5F5,card:#FFFFFF,text:#333333,textSecondary:#999999,divider:#E0E0E0}// 获取分类列表exportfunctiongetToolCategories():CategoryInfo[]{return[{category:ToolCategory.CALCULATOR,name:计算,icon:,color:#4A90E2},{category:ToolCategory.CALENDAR,name:历法,icon:,color:#E74C3C},{category:ToolCategory.CONVERT,name:换算,icon:,color:#50C878},{category:ToolCategory.FINANCE,name:财务,icon:,color:#FFB347},{category:ToolCategory.MARKET,name:行情,icon:,color:#9B59B6},{category:ToolCategory.LIFE,name:生活,icon:,color:#1ABC9C}]}7.2 BottomNavBar.ets 完整代码import{ToolCategory,CategoryInfo,THEME_COLORS,getToolCategories}from../common/AppConfig/** * 底部导航栏组件 */Componentexportstruct BottomNavBar{LinkcurrentCategory:ToolCategorybuild(){Row(){ForEach(getToolCategories(),(item:CategoryInfo){Column(){Text(item.icon).fontSize(24).fontWeight(this.currentCategoryitem.category?FontWeight.Bold:FontWeight.Normal)Text(item.name).fontSize(12).fontColor(this.currentCategoryitem.category?item.color:THEME_COLORS.textSecondary).margin({top:4})}.width(16.6%).height(100%).justifyContent(FlexAlign.Center).onClick((){this.currentCategoryitem.category})})}.width(100%).height(56).backgroundColor(#FFFFFF).shadow({radius:8,color:#1A000000,offsetY:-2})}}八、小结本文详细讲解了底部导航栏的实现核心要点✅ 使用枚举定义分类提高代码可维护性✅ Link 实现父子组件状态同步✅ ForEach 循环渲染导航项✅ 条件样式实现选中高亮✅ layoutWeight 实现自适应布局✅ 条件渲染切换不同分类页面下一篇文章将讲解工具卡片组件的实现包括卡片布局、点击交互、路由跳转等功能。系列文章导航下期预告 鸿蒙多功能工具箱开发实战(三)-分类页面与工具卡片组件