一、项目整体效果
我们实现一个底部导航栏 + 多页面切换的宿舍管理应用，包含 4 个页面：
首页：轮播展示舍友信息
推荐：6 宫格展示宿舍信息
发现：宿舍欢迎文案
我的：个人中心
核心依赖四大布局组件完成页面搭建，是鸿蒙入门级实战项目。

二、核心布局组件全解析

1. Column 垂直布局（最核心基础）

作用：将子组件垂直方向依次排列，是页面最常用的根布局。

// 根布局：垂直排列 内容区 + 底部导航栏 Column() { // 内容区域（flexGrow:1 填充剩余空间） Column().flexGrow(1) // 底部导航栏 Row() } .width('100%') .height('100%')

2. Row 水平布局（底部导航专用）

// 底部水平导航栏 Row() { Text('首页').flexGrow(1).onClick(()=>this.currentIndex=0) Text('推荐').flexGrow(1).onClick(()=>this.currentIndex=1) Text('发现').flexGrow(1).onClick(()=>this.currentIndex=2) Text('我的').flexGrow(1).onClick(()=>this.currentIndex=3) } .width('100%') .height(55) // 固定导航栏高度

3. Swiper 轮播布局（首页舍友展示）

Swiper() { // 轮播项1 Text("舍友1：潘有春\n学号：123") .backgroundColor('#E8F4FD') // 轮播项2 Text("舍友2：李四\n学号：456") .backgroundColor('#FFF3E0') // 轮播项3 Text("舍友3：王五\n学号：789") .backgroundColor('#E7F5E9') } .width('92%') .height(180) .indicator(true) // 开启指示器

4. Grid 网格布局（推荐页 6 宫格）

Grid() { // 循环生成6个宫格项 ForEach([1,2,3,4,5,6],(item:number)=>{ GridItem(){ Text(`信息${item}`) .border({width:1,color:Color.Black}) } }) } .columnsTemplate('1fr 1fr 1fr') // 定义3列等宽 .width('90%')

三、完整布局组合逻辑

根容器（Column垂直布局） ├─ 内容区（Column垂直布局 + flexGrow:1 自适应） │ ├─ 首页（Column + Swiper轮播） │ ├─ 推荐（Column + Grid网格） │ ├─ 发现（Column + 文本） │ └─ 我的（Column + 文本） └─ 底部导航栏（Row水平布局，4个按钮平分）

总结

这个宿舍管理小项目完美覆盖了鸿蒙 ArkTS 四大核心布局：

1. Column：垂直布局，页面根容器、内容区首选
2. Row：水平布局，专门制作底部导航栏
3. Swiper：轮播布局，滑动展示舍友信息
4. Grid：网格布局，快速实现 6 宫格