一、实验简介

本次基于鸿蒙ArkTS开发一款宿舍信息展示综合页面，核心融合鸿蒙七大基础布局，同时搭配Tabs标签导航、Swiper轮播组件完成功能开发。通过一个完整项目，掌握鸿蒙所有主流布局的使用场景、核心特性，实现多页面切换、成员轮播、按钮弹性排列等效果，是鸿蒙布局学习的综合性实战案例。

二、整体实现功能

项目底部设置四级标签导航，覆盖不同布局展示场景：

• 首页：基础文本展示，适配基础布局排版

• 推荐页：Swiper轮播组件结合布局实现宿舍成员自动轮播

• 发现页：Flex弹性布局实现成员按钮自动换行排列

• 我的页：预留拓展页面，可自定义布局内容

三、鸿蒙七大布局核心详解

鸿蒙ArkTS提供七种核心布局容器，分别是Column、Row、Flex、Stack、Grid、List、RelativeContainer，所有页面排版均依托这七种布局实现，以下为各布局核心作用与使用场景。

1. Column 纵向布局（垂直布局）

最常用基础布局，所有子组件从上到下垂直排列，默认垂直居中，适合页面竖向内容排版，比如文本、按钮纵向陈列。

2. Row 横向布局（水平布局）

基础横向布局，子组件从左到右水平排列，适合按钮组、图标组、横向导航等场景，单行横向展示内容。

3. Flex 弹性布局

Row的升级版，支持自动换行、自适应屏幕、自动分配间距。核心参数 FlexWrap.Wrap 实现一行放不下自动换行，本项目发现页成员按钮全部依靠Flex布局排版，适配性极强。

4. Stack 堆叠布局

层级堆叠布局，子组件层层叠加展示，后写的组件覆盖在先写的组件上方，适合实现背景图叠加文字、悬浮按钮、弹窗遮罩等层级效果。

5. Grid 网格布局

网格均分布局，自动分为多行多列，组件整齐排列成网格样式，适合相册、功能菜单、九宫格按钮等规整布局场景。

6. List 列表布局

竖向滚动列表布局，自带滚动效果，性能优异，适合展示大量重复数据，比如消息列表、宿舍成员列表、资讯列表等长列表内容。

7. RelativeContainer 相对布局

相对定位布局，组件通过锚点相对父容器/其他组件定位，不局限横竖排列，可自由控制组件位置，适合复杂页面精准定位排版。

四、项目核心组件功能说明

1. Tabs 底部标签导航

通过 Tabs({barPosition:BarPosition.End}) 将导航栏固定在页面底部，搭配多个 TabContent 实现四个页面无缝切换，是移动端App主流导航样式。

2. Swiper 轮播组件

实现宿舍成员自动轮播展示，核心属性配置：

• autoPlay(true)：开启自动轮播

• interval(2000)：每页停留2秒自动切换

• duration(500)：页面滑动动画时长0.5秒，过渡顺滑

• indicator(true)：显示底部分页小圆点，提示当前轮播页码

3. Flex 弹性布局实战应用

发现页采用自动换行弹性布局，多个不同样式的成员按钮，可根据屏幕宽度自动适配、自动换行，解决固定布局适配屏幕差的问题，排版整齐美观。

五、完整可运行源码（无冗余、可直接复制）

@Entry
@Component
struct TabBassDemo{
    build() {
      Tabs({barPosition:BarPosition.End}){
        TabContent(){
          Text('欢迎来到新3-517宿舍，下面有我来介绍一下宿舍信息。').fontSize(30)
            .padding(20)
        }
        .tabBar('首页')

        TabContent(){
          Swiper(){
            Text('皇帝陛下').backgroundColor(Color.Red).fontSize(35).textAlign(TextAlign.Center)
            Text('阳阳').backgroundColor(Color.Pink).fontSize(35).textAlign(TextAlign.Center)
            Text('宋子').backgroundColor(Color.Gray).fontSize(35).textAlign(TextAlign.Center)
            Text('辉辉').backgroundColor(Color.Yellow).fontSize(35).textAlign(TextAlign.Center)
            Text('老舍').backgroundColor(Color.Black).fontSize(35).fontColor(Color.White).textAlign(TextAlign.Center)
          }
          .autoPlay(true)
          .width('80%')
          .height('80%')
          .indicator(true)
          .interval(2000)
          .duration(500)
        }
        .tabBar('推荐')

        TabContent(){
          Flex({ wrap: FlexWrap.Wrap })
            Button('皇帝陛下').width('90%').height('80').backgroundColor(Color.Yellow) .margin({ top: 10, bottom: 10, left: 18, right: 8 }).fontColor(Color.Black)
            Button('阳阳').width(160).height(60).backgroundColor(Color.Pink) .margin({ top: 10, bottom: 10, left: 8, right: 8 })
            Button('辉辉').width(160).height(60).backgroundColor(Color.Red) .margin({ top: 10, bottom: 10, left: 8, right: 8 })
            Button('宋子').width(160).height(60).backgroundColor(Color.Blue) .margin({ top: 10, bottom: 10, left: 8, right: 8 })
            Button('老舍').width(160).height(60).backgroundColor(Color.Green) .margin({ top: 10, bottom: 10, left: 8, right: 8 })
          }
        }
        .tabBar('发现')
        TabContent(){
          Text('我的内容').fontSize(30)
        }
        .tabBar('我的')
      }
    }
}

六、运行效果

1. 页面底部配置首页、推荐、发现、我的四个导航标签，点击可自由切换页面；

2. 首页展示3-517宿舍介绍文案，界面简洁清晰；

3. 推荐页实现宿舍五名成员彩色页面自动轮播，带页码指示器，滑动过渡流畅；

4. 发现页通过Flex弹性布局实现多彩按钮自动换行排列，适配不同屏幕尺寸；

5. 项目完整结合鸿蒙核心布局与常用组件，实现多样化页面效果。

七、实验总结

本次综合项目，系统学习并运用了鸿蒙七大核心布局，熟练掌握了Column、Row、Flex、Stack、Grid、List、RelativeContainer的适配场景与核心差异。同时结合Tabs标签导航、Swiper轮播组件完成实战开发，不仅掌握了基础布局排版技巧，还熟悉了常用功能性组件的属性配置，充分理解了鸿蒙声明式UI的开发逻辑，为后续复杂界面、多功能App开发奠定了扎实基础。