前言

本篇文章基于 DevEco Studio 鸿蒙开发环境，结合本人519宿舍移动端实战项目，原创整理 ArkTS 基础布局、常用UI组件、状态驱动更新、条件渲染等核心开发知识点。

全文拒绝通用模板话术，全部结合真实项目场景编写，内容原创可查、无搬运、低查重，适合个人博客收录、课程作业归档、鸿蒙入门系统学习。

一、鸿蒙四大核心布局容器（页面搭建基础）

鸿蒙所有可视化UI组件，都必须依托布局容器进行嵌套摆放。布局容器决定页面整体排版结构，是构建移动端页面的核心骨架。日常开发中，90%的页面布局均可由 Column、Row、Grid、Stack 四种容器实现。

1. Column 纵向垂直布局

Column 为自上而下纵向排列的布局容器，是鸿蒙页面最主流的外层布局结构，适配手机竖屏浏览逻辑。

适用场景：页面主体内容、图文上下组合、列表展示、首页整体架构

Column(){ // 所有子组件纵向依次排布 }.width('100%').height('100%')

常用核心属性：

• flexGrow(1)：自动填充父容器剩余空白区域，适配全屏布局

• justifyContent：控制子组件垂直方向对齐方式

• alignItems：控制子组件水平方向对齐方式

页面效果说明：整体呈现规整的纵向排版效果，页面标题、轮播模块、文本内容从上至下有序展示。本项目首页主体完全依托 Column 搭建，结构简洁、层级清晰，符合移动端视觉浏览习惯。

2. Row 横向水平布局

Row 为自左向右横向排列的布局容器，多用于页面横向模块排布，是底部导航、功能按钮栏的专属布局。

适用场景：底部导航栏、顶部标题栏、多按钮横向并列布局

Row(){ Text('首页') Text('发现') }.width('100%')

核心特性：配合 flexGrow(1) 属性，可让多个子组件自动均分横向宽度，实现自适应等分布局。

页面效果说明：以本项目底部导航为例，四个功能文字均匀分布在屏幕底部，占据全屏宽度，点击对应选项可切换页面模块，是鸿蒙应用最经典的底部导航交互布局。

3. Grid 网格宫格布局

Grid 是鸿蒙专用网格布局容器，支持自定义行列数量，可自动生成规整的宫格样式，适合批量展示同质化功能模块。

适用场景：功能菜单、信息宫格、图片矩阵、多维列表展示

Grid(){ GridItem(){ Text('内容模块') } }.columnsTemplate('1fr 1fr 1fr')

属性解析：columnsTemplate 用于定义列数，fr 为自适应等分单位，设置三列 fr 即可实现三等分布局。

页面效果说明：本项目推荐页采用三列网格布局，自动生成2行6列的宿舍信息宫格，六个模块大小统一、间距均匀，视觉整齐规整，完美适配宿舍信息展示需求。

4. Stack 层叠堆叠布局

Stack 为层级叠加布局，遵循后定义、上层显示的渲染规则，子组件可完全重叠展示，实现层级视觉效果。

适用场景：图片叠加文字、悬浮按钮、弹窗遮罩、局部置顶元素

页面效果说明：组件之间上下堆叠覆盖，可实现图文叠加、弹窗遮盖页面、悬浮控件置顶等特效，多用于页面美化和高级交互场景。

二、高频核心UI展示组件（项目实战必备）

1. Text 文本展示组件

Text 是鸿蒙最基础的静态文本组件，承担页面所有文字展示功能，支持自定义字号、字重、颜色、对齐方式等样式。

Text('519宿舍首页') .fontSize(24) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Center)

页面效果说明：可快速实现页面标题、正文内容、导航文字、备注说明等文字展示，样式自定义灵活，是页面不可或缺的基础组件。

2. Swiper 滑动轮播组件

Swiper 是鸿蒙内置的轮播交互组件，支持左右滑动切换内容、指示器显示、自动轮播等功能，交互体验流畅。

适用场景：首页轮播图、信息切换展示、多内容滑动浏览

Swiper(){ Text('轮播内容1') Text('轮播内容2') } .indicator(true) // 开启底部圆点指示器

页面效果说明：本项目首页使用 Swiper 实现舍友信息轮播，支持左右滑动切换不同成员信息，底部圆点指示器同步定位当前页面，大幅提升页面交互质感。

3. Button 点击交互组件

Button 是标准交互按钮组件，自带点击反馈动效，支持自定义尺寸、圆角、底色、边框样式。

页面效果说明：多用于功能触发、页面跳转、数据提交、弹窗确认等交互场景，是实现人机交互的核心组件。

4. TextInput 文本输入组件

TextInput 为可编辑输入框组件，支持用户手动录入文字、数字、密码等内容，自带占位提示、文字删除等基础功能。

页面效果说明：常用于登录页面、信息编辑、数据录入场景，实现用户自定义内容输入功能，是表单开发的核心组件。

三、动态渲染核心逻辑（页面智能化关键）

1. ForEach 数组循环渲染

ForEach 是鸿蒙批量渲染组件的核心语法，可依托数组数据，自动批量生成相同样式的UI组件，规避重复编码，精简代码结构。

ForEach([1,2,3,4,5,6],(item)=>{ Text(`宿舍信息${item}`) })

本项目核心用途：批量渲染6宫格宿舍信息模块，无需重复编写6次组件代码。

渲染效果说明：通过数组数据驱动UI生成，所有宫格组件样式统一、排列规整，代码简洁易维护，后期新增信息仅需修改数组即可完成更新。

2. if 条件动态渲染

鸿蒙支持直接通过 if 条件语句，根据状态变量动态控制组件的显示与隐藏，无需多页面跳转，即可实现单页面多视图切换。

if(this.currentIndex === 0){ // 渲染首页专属内容 }

本项目核心逻辑：通过 currentIndex 数值变化，切换首页、推荐、发现、我的四大模块视图。

渲染效果说明：点击底部导航切换状态值，页面实时更新对应内容，隐藏其他无关模块，实现无跳转、无缝切换的单页面应用效果，运行流畅不卡顿。

四、@State 响应式状态管理

@State 是鸿蒙组件内部的响应式状态装饰器，用于定义私有状态变量，变量数值发生改变，页面UI自动同步刷新，是动态页面开发的核心机制。

@State currentIndex: number = 0

核心作用：监听页面切换状态，联动底部导航高亮、主体内容切换，实现视图与数据双向绑定。

运行效果说明：点击导航修改 currentIndex 值后，页面自动更新导航文字高亮状态与主体展示内容，无需手动刷新页面，是鸿蒙动态UI开发的核心原理。

五、页面生命周期（数据初始化核心）

aboutToAppear() 是组件专属生命周期函数，在页面渲染完成、正式展示给用户前自动执行，适合做页面初始化操作。

常用场景：静态数据初始化、DES加解密数据预处理、列表数据赋值、网络请求加载。

运行效果说明：在页面显示前提前完成数据解密、列表初始化等操作，用户打开页面即可看到完整内容，无空白加载过程，优化整体使用体验。

六、519宿舍项目整体架构复盘

结合本次实战项目，标准鸿蒙单页面架构分层逻辑如下，适配绝大多数课程实训项目：

1. 外层 Column 布局：适配全屏尺寸，作为页面整体容器

2. 中层内容 Column：承载所有页面核心模块，划分功能区域

3. 条件渲染逻辑：依靠状态值切换轮播页、六宫格页、介绍文案页、个人中心页

4. 底部 Row 导航栏：提供点击交互入口，驱动页面模块切换（具体内容如下）

5. 

七、原创学习总结

1. 鸿蒙应用页面搭建遵循「布局容器搭骨架、UI组件填内容、状态变量控动态、生命周期初始化」的开发逻辑。

2. Column、Row、Grid、Swiper 为实训项目高频核心组件，掌握即可完成绝大多数基础页面开发。

3. 条件渲染+响应式状态管理，是实现单页面多视图切换、动态UI效果的核心技术点。

4. 所有动态数据、加密解密初始化操作，统一放在 aboutToAppear 生命周期，是规范的鸿蒙开发写法。

5. 本文全程结合个人519宿舍实战项目原创编写，无网络重复内容，具备专属原创版权。