HarmonyOS厨房助手实战第1篇：工程结构、启动页与一多主导航

HarmonyOS厨房助手实战第1篇工程结构、启动页与一多主导航摘要本系列基于D:\APP\chufangzhushou项目拆解一个 HarmonyOS 厨房助手应用的完整实现。第 1 篇先从工程结构开始理解entry模块、页面组织、启动动画、底部导航和大屏侧边导航的设计方式。一、项目目录项目采用 Stage 模型核心代码位于entry/src/main/ets ├─ common 公共常量、路由、主题、断点、工具类 ├─ components 底部导航、侧边导航、食谱卡片、选择器、空状态 ├─ models Recipe、MealPlan、ShoppingItem、Favorite 等模型 ├─ pages 食谱、计划、购物清单、我的、设置、备份等页面 ├─ repositories JSON 文件读写仓库 └─ services 食谱、计划、购物、收藏、备份等业务服务这类分层很适合中大型 ArkTS 应用页面只负责交互和展示服务层处理业务仓库层处理持久化模型层定义数据结构。二、模块配置module.json5中配置了应用入口和设备类型{ module: { name: entry, type: entry, mainElement: EntryAbility, deviceTypes: [phone, tablet, 2in1], pages: $profile:main_pages } }这个项目明确支持手机、平板和二合一设备。后面主页面会根据断点切换底部 Tab 和左侧导航栏这就是 HarmonyOS 一多适配的典型场景。三、主页面结构入口页Index.ets不是简单跳转页而是应用主容器Entry Component struct Index { State selectedKey: string TabKey.Recipe; State showSplash: boolean true; State mainOpacity: number 0; State bp: BreakpointKey BreakpointKey.SM; Builder Content() { if (this.selectedKey TabKey.Recipe) { RecipeListPage() } else if (this.selectedKey TabKey.Plan) { MealPlanPage() } else { ProfilePage() } } }主容器只维护三个状态selectedKey当前选中的主功能。showSplash是否显示启动页。bp当前断点。这样页面切换不会依赖路由跳转主 Tab 下的状态更容易维护。四、手机底部导航与大屏侧边导航项目通过断点决定导航形态if (this.bp BreakpointKey.LG) { Row() { SideNavRail({ items: this.railItems, selectedKey: this.selectedKey }) Column() { this.Content() } } } else { Column() { Column() { this.Content() } BottomNavBar({ items: this.tabs, selectedKey: this.selectedKey }) } }小屏上使用底部导航方便单手操作大屏上使用左侧导航释放纵向空间。这个思路可以直接复用到备忘录、课程表、健身记录等应用。五、断点系统Breakpoint.ets封装了媒体查询this.smListener mediaquery.matchMediaSync((max-width: 599vp)); this.mdListener mediaquery.matchMediaSync((600vp width 840vp)); this.lgListener mediaquery.matchMediaSync((min-width: 840vp));断点分为sm手机竖屏。md折叠屏展开或平板竖屏。lg平板横屏、PC 或二合一设备。页面通过BreakpointSystem.get().register()注册回调断点变化时自动刷新布局。六、启动页过渡主页面还叠加了SplashPageif (this.showSplash) { SplashPage({ onComplete: () { animateTo({ duration: 350, curve: Curve.EaseInOut }, () { this.mainOpacity 1; }); this.showSplash false; } }) }启动页结束后主内容通过透明度动画进入。这里没有复杂路由只有一个Stack做层叠结构很清晰。七、本篇小结本篇完成了厨房助手项目的总体拆解entry模块承载应用入口。Index是主容器负责食谱、计划、我的三大 Tab。BreakpointSystem负责一多设备适配。手机端用底部导航大屏端用侧边导航。启动页通过Stack animateTo完成过渡。下一篇进入食谱列表拆解分类筛选、搜索、卡片网格和详情面板。标签HarmonyOS, ArkTS, 一多适配, 厨房助手, Stage模型