一、项目布局概述

本代码采用上下分段 Tab 底部导航布局，外层 Column 垂直布局分为两大区域：上方动态内容展示区、下方固定底部菜单栏。通过状态变量控制页面切换，四个标签分别为首页、推荐、发现、我的，综合使用 Column (垂直)、Row (水平)、Swiper (轮播)、Grid (网格) 四种常用布局组件，是鸿蒙经典底部标签页开发案例。

二、代码分段解析与功能说明

（一）页面头部定义代码段

typescript

运行

@Entry
@Component
struct DormTabPage{
  @State currentIndex: number = 0 //0首页、1推荐、2发现、3我的

1. @Entry：页面入口装饰器，代表当前页面为应用启动加载页面；
2. @Component：自定义组件装饰器，标识 DormTabPage 为 ArkTS 自定义页面组件；
3. @State currentIndex：响应式状态变量，存储当前选中的菜单下标，默认 0（首页），变量发生改变页面 UI 自动刷新，是实现页面切换的核心。

（二）页面整体外层布局

typescript

运行

build(){
    Column(){
      //上方内容区
      Column(){...}.flexGrow(1)
      //下方导航栏
      Row(){...}
    }.width('100%').height('100%')
}

1. build ()：组件 UI 渲染入口函数，所有页面控件写在 build 中；
2. 外层 Column：垂直排布，实现页面上下结构；
3. .flexGrow(1)：弹性占高属性，让上方内容区域自动填满除去导航栏以外的所有屏幕高度，底部导航栏高度固定。

（三）四大页面内容区（if 条件动态渲染）

依靠if(this.currentIndex===下标)实现页面按需加载，点击底部菜单修改下标切换页面。

1. 首页（currentIndex=0）：Swiper 轮播布局使用 Swiper 轮播组件横向滑动展示 3 位宿舍成员信息，开启 indicator 指示器，搭配 Column 垂直排版标题与轮播，实现舍友信息滑动查看。
2. 推荐页（currentIndex=1）：Grid 网格布局Grid 配合 columnsTemplate ('1fr 1fr 1fr') 实现一行三列布局，ForEach 循环遍历数组生成 6 个 GridItem 格子，形成 2 行 3 列 6 宫格宿舍信息卡片。
3. 发现页（currentIndex=2）：基础 Column 文字布局单列布局放置宿舍欢迎提示文本，简单静态展示文案。
4. 我的页面（currentIndex=3）：单行文本布局静态展示页面标题文字。

（四）底部导航 Row 水平布局

typescript

运行

Row(){
    Text('首页').onClick(()=>this.currentIndex=0)
    Text('推荐').onClick(()=>this.currentIndex=1)
    ……
}

1. Row：水平布局，四个文本按钮横向均分排列；
2. flexGrow (1)：四个导航文本平分整行宽度；
3. onClick 点击事件：点击修改 currentIndex 数值，触发 @State 变量更新，页面自动切换；
4. 三元表达式currentIndex===0?Color.Blue:Color.Black：选中菜单字体变蓝色，未选中黑色，实现选中高亮效果；
5. border 顶部边框：给导航栏添加上分割线，美化界面。

三、代码运行执行流程

1. 程序启动：页面初始化，currentIndex 默认 = 0，自动渲染首页轮播内容；
2. 点击底部【推荐】：触发 onClick，currentIndex 赋值为 1，状态刷新，页面销毁首页，渲染 Grid6 宫格推荐页；
3. 点击【发现 / 我的】：同理修改下标，切换对应页面；
4. 底部导航栏始终固定在页面最下方，不会随页面切换移动。

四、所用布局总结

1. Column：垂直布局（上下摆放控件）
2. Row：水平布局（左右并排控件）
3. Swiper：轮播布局（横向滑动多页面）
4. Grid：网格布局（行列规整多卡片）