1.Row 横向布局三种水平对齐方式演示

本案例在外层 Column 纵向容器中放置三组 Row 横向容器，通过justifyContent属性分别设置三种水平对齐规则：

1. 第一组 Row：FlexAlign.Start，组件靠左对齐，按钮整体贴页面左侧；
2. 第二组 Row：FlexAlign.Center，组件居中对齐，按钮在该行水平居中；
3. 第三组 Row：FlexAlign.End，组件靠右对齐，按钮整体贴页面右侧； 每组 Row 内部两个 Button 通过space:25控制按钮之间间距，直观区分横向布局左、中、右三种排版效果，掌握 Row 布局主轴对齐核心属性。

2.ArkTS 基础变量插值与 Column 居中布局案例

该案例为鸿蒙 ArkUI 入门基础页面，核心知识点分为两部分：

1. 普通变量定义与模板字符串插值 在组件内部直接定义字符串、数字基础变量，使用${变量名}模板语法将变量嵌入 Text 文本，实现静态数据展示；同时为每条文本单独设置不同字体颜色，区分信息模块。
2. Column 纵向布局整体居中 外层 Column 容器设置justifyContent(FlexAlign.Center)，让内部所有文本组件在页面垂直方向居中显示，搭配浅灰色页面背景、统一字号与组件间距，完成基础信息展示页面排版。 整体用于熟悉 ArkTS 基础变量语法、字符串插值写法与纵向布局主轴居中对齐属性。

3.Row 基础横向导航栏布局

该案例使用 Row 实现顶部导航栏基础效果，核心知识点：

1. 横向容器 Row 承载四个导航文本，通过space:30控制导航项之间的间距；
2. 设置width('100%')铺满屏幕宽度，height('15%')限制导航栏高度；
3. justifyContent(FlexAlign.Center)实现水平居中，alignItems(VerticalAlign.Center)实现内部文字垂直居中；
4. 通过backgroundColor给导航栏设置浅蓝色底色，模拟 App 顶部导航栏样式，掌握 Row 横向布局的水平、垂直双对齐属性。

4.Column+Row 混合嵌套 学生个人中心页面布局

本案例采用纵向 Column 嵌套多组横向 Row的混合布局，模拟学生管理系统个人中心页面：

1. 外层 Column 作为整体纵向容器，设置页面水平、垂直双居中，统一页面底色；
2. 顶部放置加粗标题文本与提示说明文字，区分页面标题与描述信息；
3. 下方分三组 Row，每组横向放置两个功能按钮，通过space控制按钮间距，统一设置按钮宽高与背景色；
4. 综合运用纵向、横向布局组合排版，还原真实 App 功能菜单页面结构，掌握横竖布局嵌套的页面搭建思路。

5.Column 纵向布局右对齐 + 变量插值展示案例

• 变量与模板字符串 组件内定义字符串、数字类型基础变量，使用 ${变量} 插值语法在 Text 文本中渲染数据，每条文本单独配置不同字体颜色区分信息。
• Column 双对齐属性 外层 Column 通过 justifyContent(FlexAlign.Center) 实现内部文本垂直居中；新增 alignItems(HorizontalAlign.End) 让所有文本整体向右对齐页面，和之前居中布局形成对比。
• 页面样式 设置铺满全屏的宽高，搭配浅灰色背景，统一文本字号与组件上下间距，直观演示纵向容器水平对齐属性 alignItems 的 End 右对齐效果。

6.Column 纵向布局底部垂直对齐 + 左对齐文本展示案例

1. 基础数据渲染 组件内定义字符串、数字类型静态变量，使用模板字符串 ${变量} 将数据嵌入 Text 组件，每条文本设置差异化字体颜色区分学生信息字段。
2. Column 双对齐核心属性

• justifyContent(FlexAlign.End)：控制内部文本整体在垂直方向靠页面底部排列；
• alignItems(HorizontalAlign.Start)：控制所有文本在水平方向靠左对齐；

1. 页面样式配置 容器宽高铺满全屏，设置浅灰色背景，通过 space:20 统一控制多行文本垂直间距，和居中、右对齐案例形成对比，完整掌握 Column 纵向容器两种对齐属性的组合用法。

知识点区分

• justifyContent：控制主轴（纵向） 整体排布位置；
• alignItems：控制交叉轴（横向） 单行内组件对齐方式

7Column 嵌套 Row 混合布局｜用户个人中心功能菜单页面

1. 整体布局结构 外层使用纵向Column作为页面主容器，内部嵌套两组横向Row，实现上下分块、每行双按钮的菜单排版，模拟 APP 个人中心功能入口。
2. 文本标题模块 页面顶部放置加粗大字号标题 “个人中心页面”，区分页面头部与功能按钮区域，通过space:50控制标题和下方按钮组的垂直间距。
3. 横向按钮行配置 每组Row内放置两个功能按钮，space:30控制同行按钮横向间距，统一约束按钮宽高，规整功能入口样式。
4. 页面整体对齐 外层 Column 设置justifyContent(FlexAlign.Center)垂直居中、alignItems(HorizontalAlign.Center)水平居中，整套菜单在页面正中间展示，搭配白色底色，还原简洁的用户中心界面，掌握横竖布局嵌套的页面搭建逻辑。