一、项目布局概述
 
采用上下分段Tab底部导航布局，外层Column垂直布局分为2个区域：上方动态内容展示区、下方固定底部菜单栏。依靠状态变量切换页面，4个标签：首页、推荐、发现、我的。用到组件：Column（垂直）、Row（水平）、Swiper（轮播）、Grid（网格），为鸿蒙底部标签页开发案例。
 
二、代码分段解析与功能说明
 
（一）页面头部定义

 
1.  @Entry ：页面入口装饰器，作为应用启动加载页。
2.  @Component ：自定义组件装饰器，定义ArkTS页面组件。
3.  @State currentIndex ：响应式状态变量，记录选中菜单下标，默认0（首页）；变量改变自动刷新UI，实现页面切换。
 
（二）页面整体外层布局

 
1.  build() ：UI渲染入口，放置所有页面控件。
2. 外层Column：垂直排布，划分上下页面结构。
3.  .flexGrow(1) ：上方内容区占满剩余屏幕高度，底部导航栏高度固定。
 
（三）四大页面内容区（if条件动态渲染）
 
通过 currentIndex 下标按需加载页面，点击底部菜单修改下标完成切换。
 
1. 首页（ currentIndex=0 ）：Swiper轮播横向滑动展示内容，开启指示器，Column排版标题和轮播。
2. 推荐页（ currentIndex=1 ）：Grid网格一行三列布局，循环生成2行3列共6张信息卡片。
3. 发现页（ currentIndex=2 ）：Column单列静态展示文本。
4. 我的页面（ currentIndex=3 ）：单行文本静态展示标题。
 
（四）底部导航Row水平布局

 
1. Row：水平布局，导航选项横向均分排列。
2.  flexGrow(1) ：平分整行宽度。
3.  onClick 点击事件：修改 currentIndex ，触发状态更新切换页面。
4. 三元表达式：选中菜单字体蓝色高亮，未选中为黑色。
5. border顶部边框：添加分割线美化界面。
 
三、代码运行执行流程
 
1. 程序启动：初始化下标默认0，加载首页。
2. 点击推荐：下标赋值1，页面销毁首页，渲染推荐网格页面。
3. 点击发现/我的：修改对应下标切换页面。
4. 底部导航栏固定在页面底端，不随页面变动。
 
四、布局组件总结
 
1. Column：垂直摆放控件。
2. Row：水平并排控件。
3. Swiper：横向滑动轮播。
4. Grid：行列规整卡片网格布局。