1.鸿蒙 ArkUI 页面路由跳转实现使用 Column 纵向布局容器内部放置 Button 按钮设置按钮背景色、宽高整体页面居中展示作为跳转触发控件。开发环境 截图为 DevEco Studio 鸿蒙开发工具界面左侧是项目工程目录右侧打开首页文件Index.ets展示点击按钮跳转新页面的完整实现代码。左侧工程目录说明 核心页面路径entry/src/main/ets/pages/Index.ets应用首页当前编辑文件second.ets目标跳转的第二页面main_pages.json页面注册配置文件跳转前必须在此注册页面路径否则路由报错2.ArkUI Column 纵向容器布局一、所属类别归属HarmonyOS ArkTS ArkUI 基础布局开发属于线性布局中 Column 纵向排列组件实操案例用于页面分块、垂直排布 UI 元素。1开发界面整体介绍截图为 DevEco Studio 代码编辑界面左侧是Index.ets页面布局源码右侧为实时预览模拟器窗口可直观查看代码渲染出的 UI 效果顶部标签栏同时打开页面、路由配置等相关文件。2外层总布局代码解析根组件为Entry Component装饰的 Index 页面页面整体使用外层 Column 容器外层容器样式宽 100%、固定高度 300背景浅灰色.justifyContent(FlexAlign.End)控制内部所有子组件整体垂直靠底部对齐 注释标注了三种对齐模式Start 靠上、Center 居中、End 靠下。3三层子色块布局实现外层 Column 垂直存放 3 个独立子 Column 色块每个子容器统一配置宽度占父容器 80%、固定高度 50配色区分层次第一、三块浅米色0xF5DEB3中间块深卡其色0xD2B48C因外层设置FlexAlign.End三个色块整体紧贴容器底部垂直排列与右侧模拟器预览效果一一对应。4模拟器预览效果说明右侧手机模拟器实时渲染代码效果页面上方留白底部垂直堆叠三段不同高度、不同底色的矩形色块直观展示 Column 纵向布局 垂直底部对齐的视觉效果验证布局属性的作用。六、代码功能总结该案例演示 Column 纵向容器的两层嵌套用法核心掌握justifyContent垂直对齐属性实现多块元素垂直靠底排布的页面分区效果。3.ArkUI Row 横向容器实现蓝牙开关布局一、所属分类HarmonyOS ArkTS ArkUI 基础布局组件开发Row 横向线性布局 Toggle 开关控件实操示例1开发界面整体展示截图为 DevEco Studio 编辑器左侧Index.ets源码右侧模拟器实时预览 UI 效果顶部标签同时打开首页、第二页面、页面路由配置文件。2外层 Column 垂直容器作用承载整行开关条目作为页面外层容器样式浅灰色背景0xEFEFEF、四周内边距 30、宽度铺满屏幕布局方向垂直布局可存放多行设置项3内层 Row 单行横向布局核心代码单行内横向排布三个元素实现文字居左、开关居右Text(Bluetooth)左侧文本字号 18Blank()弹性空白占位自动撑开将开关挤至最右侧Toggle开关控件类型为 Switch默认开启状态isOn:trueRow 行样式白色圆角背景、左侧内边距 12、宽度 100% 铺满父容器4右侧模拟器预览效果手机界面展示一行蓝牙设置栏左侧文字 Bluetooth右侧蓝色开启开关整体圆角白底页面外围浅灰色底色完美还原代码布局效果。5代码核心知识点Row 实现水平并排Blank 完成两端对齐ToggleType.Switch 系统开关组件用法容器 backgroundColor、borderRadius、padding 样式属性搭配。4.ArkUI Column 布局 space 间距属性开发界面整体视图 截图为 DevEco Studio 开发窗口左侧展示 Index.ets 完整布局源码右侧配套手机模拟器实时渲染预览可直观对照代码与页面视觉效果。外层 Column 容器核心代码 定义写法Column({space: 20})space 参数统一设置容器内全部子组件的垂直间距固定间距 20 像素内部依次存放文本组件、三段不同配色尺寸的 Row 色块容器。内部子组件代码说明 Text 文本内容为space: 20字号 55、灰色字体宽度占父容器 90%标注当前间距参数首段 Row 色块宽 100%、高 80浅米色背景后两段 Row 宽 90%、高 50分别使用深棕色、浅米色底色区分层级。预览效果与核心知识点 模拟器页面自上而下排布文字与三段色块所有元素自动保持 20px 均等垂直留白直观体现 space 属性作用该参数可快速统一容器子组件间隔无需单独给每个组件设置外边距适配列表、分区页面快速排版。5.ArkUI Column 纵向容器搭配百分比宽高分块布局开发界面整体视图 该截图为 DevEco Studio 开发界面左侧是Index.ets布局源码右侧为手机模拟器实时预览窗口顶部标签栏打开了页面、路由配置相关文件可同步查看代码与渲染效果。外层 Column 垂直容器代码 页面最外层使用空参Column()纵向布局容器内部垂直排列三段 Row 色块组件无统一间距设置子元素会紧密上下相连。三段 Row 色块样式说明 第一段红色 Row宽度 100% 铺满父容器高度占屏幕 10%填充红色第二段粉色 Row宽度 90%高度 35%填充粉色第三段黄色 Row宽度 90%高度 55%填充黄色三段高度百分比相加接近屏幕总高度。模拟器预览效果与知识点 模拟器从上至下依次显示红、粉、黄三色矩形块红色块通栏铺满粉、黄块左右留有边距案例演示百分比宽高适配屏幕Column 默认无内间距、子组件紧贴排布的特性。6.ArkUI Row 横向容器百分比三等分布局开发界面整体视图 截图为 DevEco Studio 操作界面左侧展示Index.ets布局代码右侧手机模拟器实时渲染页面效果底部存在被注释的 Column 垂直布局备用代码。外层 Row 横向容器代码 页面顶层使用 Row 水平布局容器设置宽度 100% 铺满屏幕容器内部横向并列放置三个色块子组件实现同行并排展示。三等分子 Row 色块样式说明 三个子 Row 统一设置高度 150宽度均为 33% 实现均分分别配置蓝、红、棕三种背景色三者宽度相加近似 100%横向填满父容器宽度。预览效果与核心知识点 模拟器顶部横向显示三块等宽彩色矩形无多余留白案例展示通过百分比宽度均分 Row 容器空间同时区分了 Row 横向、Column 纵向两种布局的使用场景。7.ArkUI Column 与 Row 嵌套实现开发界面整体视图 截图为 DevEco Studio 开发界面左侧是Index.ets嵌套布局源码右侧为手机模拟器实时预览窗口顶部标签栏同时打开页面、路由配置相关文件可实时对照代码与页面渲染效果。外层 Column 垂直容器代码 页面最外层为 Column 纵向布局容器内部垂直排布两个 Row 组件实现页面上下分区上方 Row 占页面总高度 35%下方外层 Row 占页面总高度 65%二者高度百分比相加为 100%完整铺满屏幕纵向空间。嵌套 Row 色块样式说明 上方红色 Row宽度 100% 铺满父容器高度 35%填充红色下方外层 Row 内部嵌套两个子 Row两个子 Row 宽度均为 50%、高度 100%分别填充蓝色、绿色实现下半区域左右对半均分。模拟器预览效果与核心知识点 模拟器页面上半部分为通栏红色色块下半部分平均分割为蓝色、绿色两块矩形该案例演示 Column 与 Row 多层嵌套混合布局结合百分比宽高实现精准比例分块是页面分区排版的常用实现方案。8.ArkUI Row 容器 space 间距与水平居中布局开发界面整体视图 截图为 DevEco Studio 开发操作界面左侧展示Index.ets完整布局源码右侧搭载手机模拟器实时渲染预览窗口顶部标签栏打开多页面相关文件可同步对照代码逻辑与页面视觉效果。外层 Row 横向容器代码 页面根容器为Row({space: 20})横向布局space 参数控制内部三个子组件水平间隔 20 像素外层容器宽高均设 100% 铺满屏幕搭配.justifyContent(FlexAlign.Center)实现内部元素整体水平居中。三子 Row 色块样式说明 内部并列三个独立 Row 色块统一设置宽度 30%、高度 65%依次填充红色、蓝色、灰色相同尺寸保证三列高度对齐依靠 space 参数自动产生均匀横向留白。模拟器预览效果与核心知识点 模拟器页面中间横向排布红、蓝、灰三根等高竖条色块之间留有均等空隙整体在页面水平居中案例掌握 Row 容器 space 间距参数、FlexAlign.Center 水平居中属性以及百分比尺寸适配页面的搭配用法。9.ArkUI 多层嵌套布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧展示Index.ets多层嵌套布局源码右侧手机模拟器实时渲染页面效果顶部标签栏打开多个页面配置文件可实时对照代码逻辑与视觉展示效果。最外层 Column 根容器代码 页面顶层为 Column 纵向布局容器宽高 100% 铺满屏幕整体背景浅灰内部垂直划分上下两大区域上区域占页面高度 40%下区域占页面高度 60%上下区域均设置justifyContent(FlexAlign.End)让内部色块靠区域底部排布。双层分区嵌套色块样式说明 上分区外层 Row 横向容器内部并列 3 个 Column 竖条每个宽 20%、高 100%分别为蓝、棕、灰三色下分区外层 Column 纵向容器内部堆叠 3 个横条 Column每个宽 60%、高 60依次填充蓝、棕、灰三色。模拟器预览效果与核心知识点 模拟器上半区域顶部靠右显示三根等高竖色块下半区域页面底部靠左堆叠三层横向色块案例综合运用 Column、Row 多层嵌套、百分比尺寸、FlexAlign.End 底部对齐属性掌握分区域布局与子元素对齐控制的完整实现思路。10.ArkTS 页面自定义成员变量与文本插值渲染开发界面整体视图 截图为 DevEco Studio 开发窗口左侧是FirstArkPage.ets页面源码右侧配套手机模拟器实时预览文字渲染效果顶部标签栏同时打开首页、第二页面、路由配置文件。组件自定义成员变量代码 在自定义组件 FirstArkPage 内直接定义 4 个私有成员变量分别存储学生姓名、班级、入学年份、院校名称区分 string 字符串与 number 数字两种基础数据类型用于后续页面展示。Column 布局与文本插值代码说明 外层 Column 纵向容器设置 space:20 统一文本垂直间距宽高铺满屏幕、浅灰底色、内部元素整体居中内部 4 个 Text 组件通过${this.变量名}插值语法读取组件内定义的变量每个文本单独设置字号 22 与专属字体颜色。模拟器预览效果与核心知识点 模拟器页面居中分行展示四条彩色学生信息文本变量数据成功渲染到界面案例掌握 ArkTS 组件内部变量定义、模板字符串插值语法、Column 间距与居中布局、Text 文字样式设置的综合用法。11.ArkUI State 装饰器响应式变量交互开发界面整体视图 截图为 DevEco Studio 代码编辑界面左侧打开Index.ets源码文件右侧手机模拟器实时展示文本渲染效果顶部标签栏切换多个页面与路由配置文件可同步对照代码逻辑与页面展示。组件内部自定义变量代码 在 Index 自定义组件中定义 4 个成员变量包含字符串、数字两种数据类型分别存储学生姓名、班级、入学年份、院校信息用于 Text 组件插值展示。Column 布局与文本插值代码说明 外层 Column 设置space:20控制文本垂直间距容器样式铺满全屏、浅灰色背景配置justifyContent(FlexAlign.End)让子元素整体靠容器底部搭配alignItems(HorizontalAlign.Start)让所有文本统一左对齐内部 4 个 Text 组件使用${this.变量名}插值语法读取变量单独设置字号 22 与差异化字体颜色。模拟器预览效果与核心知识点 模拟器页面底部靠左分行展示四条彩色学生信息文本案例掌握组件变量定义、模板插值语法同时区分 Column 垂直对齐 justifyContent、水平对齐 alignItems 两组布局属性的搭配使用逻辑。12.ArkTS 变量插值 双对齐属性居中靠右布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧展示Index.ets页面源码右侧手机模拟器实时预览文字展示效果顶部存在代码注释标识可同步对照代码逻辑与页面渲染效果。组件自定义成员变量代码 在 Index 自定义组件内定义 4 个普通成员变量区分 string 字符串、number 数字两种数据类型分别存储学生姓名、班级、学习年份、院校名称作为页面文本渲染数据源。Column 布局与文本插值代码说明 外层 Column 纵向容器配置space:20控制文本垂直间距容器宽高铺满屏幕、浅灰色背景justifyContent(FlexAlign.Center)让全部文本整体垂直居中搭配alignItems(HorizontalAlign.End)使文本统一靠右排列内部 4 个 Text 组件通过${this.变量名}插值语法读取变量分别设置字号 22、差异化字体颜色。模拟器预览效果与核心知识点 模拟器页面居中靠右分行展示四条彩色学生信息文本案例掌握普通组件变量定义、模板字符串插值语法区分 Column 垂直对齐与水平对齐两组布局属性实现文字居中且靠右的排版效果。13.ArkUI Row 横向导航栏基础布局演示开发界面整体视图 截图为 DevEco Studio 开发界面左侧打开RowBaseArk.ets导航页面源码右侧是手机预览器实时渲染效果顶部标签栏可切换多页面文件实现代码与界面同步对照查看。外层 Row 横向导航容器代码 页面根容器为Row({space:30})水平布局space 参数控制内部文字横向间距容器设置宽度 100% 铺满屏幕、高度占页面 15%浅蓝色背景搭配双对齐属性控制内部文字位置。导航文本与对齐属性代码说明 Row 内部放置 4 个 Text 导航文本统一字号 25内容分别为首页、课程、消息、我的justifyContent(FlexAlign.Center)控制文字整体水平居中alignItems(VerticalAlign.Center)控制文字在容器内垂直居中。预览效果与核心知识点 预览窗口顶部浅蓝色栏居中展示四个间隔均匀的导航文字案例掌握 Row 水平布局 space 间距参数、水平与垂直双居中对齐属性实现顶部导航栏的标准基础写法。14.ArkUI Column 嵌套 Row 实现三种水平对齐效果演示开发界面整体视图 截图为 DevEco Studio 开发界面左侧展示RowBaseArk.ets布局源码右侧手机预览器实时渲染按钮排版效果顶部标签栏可切换多个页面配置文件可同步对照代码逻辑与页面视觉效果。外层 Column 垂直容器代码 页面最外层为 Column 纵向布局容器设置space:25控制三行按钮组的垂直间距容器宽度铺满屏幕内部垂直排列三段独立 Row 水平布局分别演示左、中、右三种水平对齐方式。三层 Row 行布局与按钮样式说明 三段 Row 均配置space:25控制同行两个按钮的横向间距每行宽度 100% 铺满屏幕每行内部两个 Button 统一尺寸宽 80、高 35文字分别标注左一左二、中一中二、右一右二三段 Row 分别设置FlexAlign.Start靠左、FlexAlign.Center居中、FlexAlign.End靠右三种水平对齐属性。预览效果与核心知识点 预览窗口自上而下依次展示左对齐、居中对齐、右对齐三组蓝色按钮案例掌握 Column 与 Row 嵌套布局理解 justifyContent 三种水平对齐枚举值的视觉差异同时熟悉 space 统一设置组件间距的便捷用法。15.ArkUI Column 嵌套 Row 实现个人中心页面综合布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧是RowBaseArk.ets个人中心页面源码右侧手机预览窗口实时渲染页面效果左侧工程目录可查看全部页面文件能同步对照代码与页面展示效果。外层 Column 垂直容器代码 页面根容器为 Column 纵向布局设置space:50控制页面标题与两行按钮组的垂直间距容器宽高铺满屏幕、白色背景通过justifyContent(FlexAlign.Center)实现内部内容整体垂直居中alignItems(HorizontalAlign.Center)实现全部子元素水平居中。页面内容嵌套布局代码说明 Column 内部从上至下分为三部分第一部分是加粗大字号标题文本 “个人中心页面”下方两段独立 Row 横向容器均设置space:30控制同行按钮间距每行包含两个固定宽高的功能按钮按钮文字分别对应编辑资料、修改密码、查看订单、退出登录。预览效果与核心知识点 预览页面居中显示标题文字下方分两行均匀排布四枚功能按钮案例综合运用 Column 与 Row 多层嵌套、文本字体加粗样式、百分比全屏容器、水平 垂直双居中属性完整还原个人中心功能列表页面的基础结构。16.ArkUI Column 嵌套 Row 实现学生管理个人中心页面布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧打开RowBaseArk.ets页面源码右侧手机预览器实时渲染页面效果顶部标签栏可切换多个页面文件能够同步对照代码逻辑与界面展示效果。外层 Column 垂直容器代码 页面根容器为 Column 纵向布局设置space:50统一控制内部所有模块的垂直间距容器宽高占满屏幕白色背景通过justifyContent(FlexAlign.Center)实现内容整体垂直居中搭配alignItems(HorizontalAlign.Center)让全部子元素水平居中。页面分层嵌套布局代码说明 Column 内自上而下分为三层内容第一层为加粗大标题文本第二层为小号欢迎提示文本下方嵌套三段独立 Row 横向容器每段 Row 设置space:30控制同行按钮间距每行放置两个固定宽高的功能按钮覆盖课表、成绩、学分申请、缓考补考等学生业务功能。预览效果与核心知识点 预览页面居中展示标题、欢迎文字下方分三行均匀排布六枚功能按钮案例综合运用 Column 与 Row 嵌套结构、文本粗细与字号样式、全屏适配容器、双居中对齐属性完成学生管理系统个人首页完整布局掌握多组功能按钮列表的标准化实现方式。17.ArkUI Stack 层叠容器多层叠加布局演示开发界面整体视图 截图为 DevEco Studio 开发界面左侧打开StackDemo.ets层叠布局源码右侧手机预览器实时渲染色块叠加效果顶部标签栏可切换多个页面文件可同步对照代码逻辑与页面视觉效果。前置变量与外层容器代码 文件顶部预先定义 Record 类型对象 mTop存储顶部外边距数值 50页面根容器为 Stack 层叠布局宽 100%、高 150通过 margin 设置顶部外边距容器内部自上而下叠加三个不同尺寸、颜色的组件。Stack 内部三层叠加组件代码说明 Stack 内组件遵循从上到下渲染、下层覆盖上层的规则底层为宽 90%、高 100 的红色 Column中间层为宽 60%、高 80 的黄色 Text顶层为宽 30%、高 30 的深紫色 Button三层组件尺寸依次缩小自动居中堆叠。预览效果与核心知识点 预览页面顶部依次显示三层居中堆叠色块红色底层面积最大紫色按钮位于最顶层案例掌握 Stack 容器层叠渲染规则、Record 类型边距变量定义、多尺寸色块叠加居中效果理解 Stack 与 Row/Column 线性布局的核心区别。18ArkUI Stack 层叠容器三层居中叠加布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧展示StackDemo.ets层叠布局完整源码右侧手机预览器实时渲染三层色块叠加效果右侧侧边栏提供预览、调试相关工具可同步对照代码与页面视觉表现。前置变量与外层嵌套容器代码 文件顶部定义 Record 类型变量 mTop存储顶部外边距数值 50页面外层先包裹 Column 容器内部放置 Stack 层叠组件Stack 设置宽度 100%、高度 150通过 margin (mTop) 统一设置顶部外边距Stack 内部承载三层不同尺寸色块组件。Stack 内部三层叠加组件代码说明 Stack 遵循先写底层、后写顶层的渲染覆盖规则底层红色 Column 宽 90%、高 100中间黄色 Text 宽 60%、高 80顶层深紫色 Button 宽 30%、高 30三层组件无额外对齐设置默认在 Stack 容器内水平垂直居中堆叠。预览效果与核心知识点 预览页面顶部呈现三层居中嵌套色块红色底层面积最大紫色按钮位于最上层案例掌握 Stack 层叠渲染覆盖逻辑、Record 类型样式变量定义、多层同居中叠加效果区分 Stack 层叠布局与 Column/Row 线性平铺布局的使用场景。19.ArkUI Stack 层叠容器三层居中嵌套叠加布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧展示StackDemo.ets完整层叠布局源码右侧手机预览窗口实时渲染三层色块叠加效果右侧侧边栏提供预览、调试工具可同步对照代码逻辑与页面视觉效果。前置变量与外层嵌套容器代码 文件顶部定义 Record 类型变量 mTop用于统一设置顶部外边距数值 50页面最外层为 Column 纵向容器内部放置 Stack 层叠组件Stack 设置宽度 100%、高度 150通过 margin (mTop) 添加顶部外边距内部承载三层尺寸依次缩小的色块组件。Stack 内部三层叠加组件代码说明 Stack 遵循先渲染底层、后渲染顶层的覆盖规则底层红色 Column 宽 90%、高 100中间黄色 Text 宽 60%、高 80顶层深紫色 Button 宽 30%、高 30三层组件默认在 Stack 容器内水平、垂直双向居中形成嵌套叠加视觉。预览效果与核心知识点 预览页面上方展示三层居中嵌套色块红色底层最大紫色按钮位于最上层案例掌握 Stack 层叠覆盖渲染逻辑、Record 类型样式变量定义、多层居中叠加实现方式区分 Stack 层叠布局与 Column、Row 线性平铺布局的使用差异。20.ArkUI Stack 海报图文层叠布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧打开StackBase.ets页面源码右侧手机预览器实时渲染海报层叠效果顶部标签栏可切换多个布局演示文件能够同步对照代码与页面展示效果。根 Stack 全屏容器代码 页面顶层为 Stack 层叠容器宽高均设置 100% 铺满手机屏幕容器内部包含两层叠加组件默认全部子组件水平垂直双向居中。两层层叠组件样式代码说明 底层为灰色正方形 Column固定宽高 220px 充当海报底板顶层是文本组件文字为 “鸿蒙实训海报”字号 22、白色字体配置内边距 padding、圆角 borderRadius 与红色背景形成悬浮标签样式覆盖在灰色方块中心。预览效果与核心知识点 预览窗口页面居中展示灰色方块底板方块中心叠加红色圆角文字标签案例掌握 Stack 默认居中叠加特性、图文分层实现海报效果熟练使用 padding 内边距、borderRadius 圆角样式修饰文本组件。21.ArkUI Column 嵌套 Stack开发界面整体视图 截图为 DevEco Studio 开发界面左侧展示StackNex.ets页面完整源码右侧手机预览窗口实时渲染个人中心页面效果可同步对照代码结构与界面展示样式。外层 Column 全局容器代码 页面最外层为 Column 纵向布局设置space:20控制标题、头像模块、用户介绍文本三组内容的垂直间距容器宽高铺满屏幕、白色背景搭配双居中属性让全部内容在页面垂直水平居中。页面分层代码与 Stack 层叠头像模块说明 Column 内从上至下分为三部分第一部分是加粗大号标题文本中间为 Stack 层叠容器底层是带圆角灰色正方形头像底板顶层居中叠加红色 VIP 白色文字标签底部 Column 纵向放置两行用户介绍文本分别设置不同字号与字体粗细。预览效果与核心知识点 预览页面居中依次展示标题、带 VIP 悬浮标签的圆角头像、两行个人介绍文字案例综合运用 Column 纵向排版、Stack 层叠叠加实现头像角标效果掌握圆角、字号、字重、居中对齐等常用文本与容器样式搭配。22.ArkUI Column 嵌套 RowStack开发界面整体视图 截图为 DevEco Studio 开发界面左侧展示StackDemo.ets完整布局源码右侧手机预览器实时渲染个人中心页面效果顶部标签栏可切换各类布局演示文件可同步对照代码逻辑与页面视觉展示。外层全局 Column 容器代码 页面最外层为 Column 纵向布局设置space:20控制标题、头像信息行两大模块的垂直间距容器宽高占满屏幕白色背景通过双居中属性让全部内容在页面水平、垂直居中展示。页面嵌套分层代码说明 Column 内分为上下两部分上方是加粗大号标题文本下方嵌套 Row 水平容器space:20控制头像与文字间距。Row 左侧为 Stack 层叠组件底层是带圆角灰色正方形头像底板顶层居中叠加红色圆角 VIP 标签Row 右侧嵌套 Column 纵向容器分行展示用户名与简介文本分别配置字号、字重与字体颜色。预览效果与核心知识点 预览页面居中先展示标题下方一行内左侧是带 VIP 悬浮角标的圆角头像右侧垂直排列两行个人介绍文字案例综合运用 Column、Row、Stack 三层嵌套掌握 Stack 层叠实现头像标签、水平并排图文布局、圆角与多字体样式的组合使用方式。25.ArkUI Column 嵌套 RowStack开发界面整体视图 截图为 DevEco Studio 开发界面左侧展示StackDemo.ets完整布局源码右侧手机预览器实时渲染个人中心页面效果顶部标签栏可切换各类布局演示文件可同步对照代码逻辑与页面视觉展示。外层全局 Column 容器代码 页面最外层为 Column 纵向布局设置space:20控制标题、头像信息行两大模块的垂直间距容器宽高占满屏幕白色背景通过双居中属性让全部内容在页面水平、垂直居中展示。页面嵌套分层代码说明 Column 内分为上下两部分上方是加粗大号标题文本下方嵌套 Row 水平容器space:20控制头像与文字间距。Row 左侧为 Stack 层叠组件底层是带圆角灰色正方形头像底板顶层居中叠加红色圆角 VIP 标签Row 右侧嵌套 Column 纵向容器分行展示用户名与简介文本分别配置字号、字重与字体颜色。预览效果与核心知识点 预览页面居中先展示标题下方一行内左侧是带 VIP 悬浮角标的圆角头像右侧垂直排列两行个人介绍文字案例综合运用 Column、Row、Stack 三层嵌套掌握 Stack 层叠实现头像标签、水平并排图文布局、圆角与多字体样式的组合使用方式。26.ArkUI 多层嵌套布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧展示StackDemo.ets完整综合布局源码右侧手机预览器实时渲染个人中心完整页面效果顶部标签栏可切换多种布局演示文件可同步对照代码层级与页面展示效果。外层全局 Column 容器代码 页面最外层为 Column 纵向布局设置space:20统一控制页面内各模块垂直间距容器宽高铺满屏幕、白色背景配置居中对齐属性让全部内容在页面水平、垂直居中排布。多层嵌套模块分层代码说明 Column 自上而下分为四大模块第一部分是加粗大号页面标题文本第二部分为 Row 水平容器左侧 Stack 层叠组件实现带红色 VIP 圆角标签的灰色圆角头像右侧 Column 纵向展示用户名与简介文字第三部分为两组 Row 水平容器左右分栏展示线性、层叠布局分类文字第四部分为底部功能按钮 Row左右放置 “开始学习”“开始考试” 两个圆角按钮。预览效果与核心知识点 预览页面完整展示标题、头像用户信息、布局分类文字、底部双功能按钮案例综合运用 Column、Row、Stack 三层嵌套融合层叠角标、水平图文并排、多组分栏、功能按钮等常见页面组件完整掌握线性布局与层叠布局搭配开发页面的实战逻辑。27.ArkUI Stack 结合 position 绝对定位悬浮卡片布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧打开StackFloatCard.ets悬浮卡片源码右侧手机预览器实时渲染课程推荐卡片效果顶部标签栏可切换多个 Stack 布局演示文件可同步对照代码与页面视觉效果。根 Stack 全屏容器代码 页面顶层为 Stack 层叠容器宽高 100% 铺满整个手机屏幕内部承载两个层叠组件支持基础居中与 position 绝对定位两种布局方式混用。卡片与悬浮按钮代码说明 底层卡片为带圆角、内边距的 Column 容器固定宽 300、高 180青色背景内部垂直居中展示两行课程标题描述文本顶层按钮使用 position ({x:140,y:400}) 实现绝对偏移悬浮固定宽高、深色圆角样式叠加在卡片右下角位置。预览效果与核心知识点 预览页面居中展示青色课程卡片卡片右下角悬浮 “立即学习” 按钮案例掌握 Stack 层叠布局搭配 position 绝对定位实现悬浮按钮熟悉卡片圆角、内边距、文本居中样式区分默认居中与自定义坐标定位的使用场景。28.ArkUI ColumnRowStackFlex 多布局综合班级信息页面开发界面整体视图 截图为 DevEco Studio 开发界面左侧展示StackBase.ets完整综合布局源码右侧手机预览器实时渲染班级信息卡片页面顶部标签栏可切换各类布局演示文件可同步对照多层代码结构与页面展示效果。外层全局 Column 容器代码 页面最外层为 Column 纵向布局设置space:20分隔页面标题、用户信息行、课程标题、课程按钮组四大模块容器铺满全屏、青色背景统一内边距页面顶部通过 margin 设置外边距变量 mTop。多层嵌套模块分层代码说明 Column 自上而下分为四部分第一部分是居中加粗大号班级标题第二部分为 Row 水平容器左侧 Stack 层叠组件实现黄色圆角头像 红色 “开发者” 悬浮标签右侧 Column 纵向展示姓名与学号第三部分是居中课程分类标题文本第四部分为 Flex 弹性布局开启自动换行 wrap内部放置五门课程粉色圆角按钮按钮设置外边距实现间隙。预览效果与核心知识点 预览页面完整展示班级标题、带 VIP 标签的头像信息、多行自动换行课程按钮案例综合运用 Column 纵向、Row 水平、Stack 层叠、Flex 弹性自动换行四类核心布局融合圆角、边距、文字居中、多组件层叠角标等样式掌握多布局搭配开发信息展示页面的完整流程。29.线性纵向布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧工程目录展示全部页面文件中间打开TextDemo.ets源码右侧手机预览器实时渲染文本效果可同步对照文本样式代码与页面展示。外层 Column 根容器代码 页面最外层为 Column 纵向布局宽高设置 100% 铺满手机屏幕容器内部仅放置单个 Text 文本组件。Text 文本多类样式代码说明 文本内容为 “你好”配置多组基础样式字号 30、红色字体、中等字重设置顶部外边距 20浅蓝色背景单独配置底部内边距 60区分 margin 外边距与 padding 内边距的使用。预览效果与核心知识点 预览页面上方展示浅蓝色底色文本块红色文字居中显示案例掌握 Text 基础文字样式字号、字体颜色、字重分清 margin 外边距、padding 内边距的视觉区别学会基础背景色修饰文本组件。30.ArkUI Column 纵向布局 资源字符串读取开发界面整体视图 截图为 DevEco 开发界面左侧工程目录中间分左右两块代码左侧TextDemo.ets页面逻辑中间右侧string.json字符串资源文件右侧手机预览器实时渲染两条文本效果可对照硬编码文字与资源引用文字的实现区别。外层 Column 根容器代码 页面顶层使用Column 纵向线性布局设置space:30控制两条文本的垂直间距Column 宽高 100% 铺满全屏两个 Text 组件垂直依次排列。文本与资源读取代码说明 第一行 Text 为硬编码文字你好配置字号、红色字体、背景色、文字居中、宽度铺满 第二行 Text 通过$r(app.string.module_desc)读取 json 资源文件内定义的字符串 “张三”样式与第一条文本保持一致 右侧 string.json 存放全局静态文字资源实现文字与代码解耦。预览效果与核心知识点 预览页面垂直显示两行带浅青底色、居中红色文字 核心布局Column 纵向线性布局额外掌握$r()系统资源引用读取字符串、文本居中、统一组件样式复用写法。31.ArkUI Column 嵌套 Row 实现登录表单页面布局开发界面整体视图 截图为 DevEco Studio 开发界面左侧打开buttonDemo1.ets登录页面源码右侧手机预览器实时渲染登录表单效果左侧工程目录可查看全部页面文件能够同步对照代码层级与界面展示效果。外层全局 Column 容器代码 页面最外层为 Column 纵向线性布局设置space:50控制标题、输入框、按钮组各个模块的垂直间距所有子组件垂直依次排列。多层嵌套表单分层代码说明 Column 自上而下分为四部分 ① 大号加粗标题文本 “用户登录”设置底部外边距 ② 普通文本输入框 TextInput占位提示输入学号 / 手机号配置圆角、浅灰底色 ③ 密码输入框通过InputType.Password开启密码隐藏模式样式与上一个输入框统一 ④ 独立蓝色圆角 “确认注册” 按钮独占一行 ⑤ 嵌套 Row 水平布局space:35控制两个按钮横向间距左侧灰色 “取消注册”右侧红色 “立即注册”实现双按钮并排。预览效果与核心知识点 预览页面垂直排布标题、两个输入框、单个主按钮、并排双功能按钮案例综合使用Column 纵向布局Row 水平布局掌握 TextInput 普通 / 密码输入类型、Button 多色彩圆角样式、行列嵌套搭建登录表单的标准写法。