1.垂直线性布局Column是鸿蒙 ArkUI 的垂直线性布局容器所有子组件会从上到下垂直依次排列对应 Android 的 LinearLayout (vertical)。1. 页面装饰器页面基础标识Entry标记这个页面是程序入口页面预览器、模拟器默认加载该页面Component声明这是一个自定义 ArkUI 组件struct Index页面组件名称为 Index2. build () 页面构建入口所有页面 UI 代码都写在build函数内部页面渲染时会执行这里的布局代码3. 最外层根容器大 Column整体垂直布局逐段解析外层 ColumnColumn()垂直线性布局容器里面所有子组件会从上往下垂直摆放.width(100%)这个灰色大容器宽度铺满整个屏幕.height(300)固定容器高度为 300 像素.backgroundColor(rgb(242,242,242))给整个大容器设置浅灰色背景.justifyContent(FlexAlign.End)Column 的主轴是垂直方向这个属性控制内部 3 个色块整体靠容器底部对齐所以色块全部贴在灰色区域下方上方留出大片空白。 注释说明的可选值FlexAlign.Start内部元素靠容器顶部FlexAlign.Center内部元素垂直居中FlexAlign.End内部元素靠容器底部当前代码使用4. 第一个色块布局内部子 ColumnColumn(){}空的垂直布局容器单纯用来做彩色矩形色块 .width(80%)色块宽度占外层灰色容器的 80%左右两边自动留白 .height(50)色块固定高度 50 像素 .backgroundColor(0xF5DEB3)设置色块背景为浅土黄色十六进制颜色写法整体布局逻辑总结整体布局类型Column 垂直线性布局线性布局采用Column 嵌套 Column结构层级关系1 个外层大 Column灰色 300 高容器包含 3 个内层小 Column彩色色块排列规则外层 Column 设置justifyContent(FlexAlign.End)3 个色块整体贴在灰色容器底部3 个色块在大容器内部垂直依次上下排列自动产生默认间距每个色块宽度只有父容器 80%左右留有空白不会铺满屏幕视觉效果顶部灰色空白区域底部堆叠三个等宽等高、交替颜色的横向色块。2.水平垂直布局一、布局类型。核心使用Row 水平线性布局采用Row 嵌套 Row的结构实现三等分横向色块二、外层父 Row 解析Row()水平线性布局内部所有子组件从左向右横向排列.width(100%)父 Row 宽度铺满整个手机屏幕为等分提供容器基础无space参数子组件之间无默认间距三个色块紧紧贴合。三、内部三个子 Row彩色色块每一个子 Row 都是独立占位容器属性完全统一仅背景色区分.width(33%)宽度占父 Row 总宽度的 33%3 个相加近似 100%实现横向三等分.height(150)固定色块高度 150 像素.backgroundColor(颜色常量)设置色块背景第一个Color.Blue蓝色第二个Color.Red红色第三个Color.Brown棕褐色四、代码注释说明注释标注当前代码作用下方被/* */多行注释包裹的 Column 垂直布局代码不会执行仅作为对比参考。五、对应预览视觉效果页面顶部横向并排三块等高色块蓝、红、棕依次紧密排列三等分屏幕宽度色块高度固定 150px下方为空白页面。六、用到的核心知识点Row 水平线性布局组件横向排列布局嵌套父 Row 包裹多个子 Row用子 Row 做色块占位百分比自适应宽度33%实现屏幕等分适配尺寸修饰width()、height()控制组件宽高背景色 APIbackgroundColor()支持系统内置颜色常量Color.xxx代码注释单行//、多行/* */注释注释内代码不会渲染执行。3.线性布局 Row Column 嵌套一、整体外层容器Column 垂直线性布局Column({space:25})垂直线性布局内部 3 行 Row 组件从上到下垂直排列每行之间垂直间距 25px.width(100%)容器宽度铺满屏幕.justifyContent(FlexAlign.End)Column 主轴为垂直方向三行内容整体靠页面底部对齐。FlexAlign.Start水平主轴靠左对齐两个按钮紧贴容器左侧中间间距 25px 对应预览第一行按钮在页面左上角。2. 第二行 Row居中 CenterFlexAlign.Center水平主轴居中对齐两个按钮整体在该行中间 对应预览第二行按钮在页面水平中间。3. 第三行 Row居右 EndFlexAlign.End水平主轴靠右对齐按钮紧贴容器右侧对应预览第三行按钮在页面右上角。三、Button 按钮通用属性四、核心知识点汇总布局嵌套结构外层Column垂直包裹三层Row水平属于线性布局嵌套space统一间距Column 的 space控制行与行垂直间距Row 的 space控制同一行内按钮横向间距justifyContent主轴对齐重点Column垂直主轴FlexAlign.End→ 整体靠下Row水平主轴Start靠左Center居中End靠右百分比宽高.width(100%)让每行 Row 占满屏幕宽度对齐效果才能体现。五、视觉效果对应预览三行按钮垂直均匀分隔全部贴在页面下半部分第一行按钮靠左、第二行居中、第三行靠右直观展示 Row 三种主轴对齐方式。4.层叠布局一、整体结构分层二、Stack 堆叠布局本页面核心1. Stack 作用层叠布局容器内所有子组件默认中心重叠堆叠先写的组件在底层后写的覆盖在上层第一行红色 Column → 最底层最大色块第二行黄色 Text → 中间层盖住红色中间区域第三行紫色 Button → 最顶层盖住黄色中间区域 对应预览效果红底→黄中层→紫小圆条三层叠加。2. Stack 默认对齐规则Stack 内部子组件默认水平 垂直双居中所以三个色块全部中心对齐叠加。三、外层 Column 垂直线性布局Column 是垂直线性布局这里只放了一个 Stack作用是承载 Stack可搭配上下其他组件纵向排列。四、修饰符与变量解释let mTop:Recordstring,number {top:50}定义外边距对象给 Stack 设置顶部外边距 50px色块整体距离页面顶部留出 50 空白。.margin(mTop)给 Stack 容器设置顶部外边距 50。尺寸与背景色底层红块宽 90%、高 100中层黄块宽 60%、高 80顶层紫块宽 30%、高 30Stack 整体宽 100%、高 150五、布局总结核心布局类型Stack 堆叠层叠布局实现多层组件重叠覆盖外层包裹 Column 垂直线性布局用来纵向承载堆叠模块堆叠逻辑代码书写顺序 图层从下到上顺序默认全部居中重叠。5.相对布局一、核心容器介绍RelativeContainer是鸿蒙 ArkUI相对布局容器核心逻辑子组件通过 ID 互相绑定、以容器 / 其他组件为参照物自由指定上下左右对齐位置不依赖 Row/Column 单向排列。二、逐段代码解析1. 外层容器所有组件必须写在RelativeContainer内部才能使用相对定位规则。2. 顶部文本组件.id(title)给组件设置唯一标识其他组件可通过 id 引用它做参照物.alignRules()相对定位规则配置是相对布局核心 APIanchor: __container__参照物为父容器本身top规则垂直方向对齐父容器顶部left规则水平方向在父容器中水平居中 效果文字固定在页面顶部居中。3. 中间按钮组件.id(basebtn)按钮唯一 ID定位规则top垂直对齐父容器垂直中心点left水平对齐父容器水平中心点 效果按钮在页面正中心。三、相对布局关键知识点必须配置 id容器内每一个子组件都要设置.id(自定义名称)作为定位标识参照物 anchor 两种取值__container__参照物是父 RelativeContainer 容器其他组件 id如title、basebtn参照物是页面内另一个组件align 对齐枚举垂直 VerticalAlignTop 顶部 / Center 居中 / Bottom 底部水平 HorizontalAlignLeft 左 / Center 中 / Right 右和线性布局 Row/Column 区别Row/Column只能单向依次排列组件位置互相绑定、无法自由摆放RelativeContainer组件可独立定位能自由放在页面任意位置适合悬浮按钮、顶部标题、居中弹窗这类错落布局。四、页面视觉效果总结标题文字页面最顶部、水平居中蓝色按钮页面正中间垂直 水平双居中整体依靠相对父容器的规则完成定位属于标准相对布局案例。6.弹性布局本页面核心布局Flex 弹性布局一、Flex 容器基础代码解析Flex弹性布局容器是 Row/Column 的增强版默认主轴水平横向排列wrap: FlexWrap.NoWrap不自动换行子组件超出容器宽度时不会折行会挤压重叠当前三个文本总宽度66% 33% 33% 132%超过父容器 100% 宽度又设置不换行因此 3 号文本被挤压、和 2 号重叠和预览效果完全对应容器修饰.width(90%)弹性容器占屏幕 90% 宽度.height(70)容器固定高度 70px.padding(10)容器内边距 10px内部色块和浅蓝色边框留出空白.backgroundColor(#AFEEEE)容器浅青蓝色背景。二、内部子组件Text 色块三个 Text 作为弹性子元素各自设置百分比宽度、固定高度、背景色Text1宽 66%、浅黄底色Text2宽 33%、棕底色Text3宽 33%、浅黄底色 总宽度相加超过 100%因NoWrap不换行直接横向挤压重叠。三、核心知识点区分Flex 弹性布局 vs Row 线性布局Row超出宽度直接截断无挤压重叠效果Flex支持wrap换行控制NoWrap模式下子元素会自适应挤压是弹性布局独有特性FlexWrap 枚举FlexWrap.NoWrap不换行当前使用FlexWrap.Wrap超出宽度自动换行FlexWrap.WrapReverse反向换行。四、视觉效果对应预览图浅蓝色大容器内部三个色块横向挤在同一行1 号占比最大2、3 号 33% 宽度超出容器发生重叠整体容器左右留有屏幕边距、内部有 10px 内边距。7.轮番组件一、外层布局Column 垂直线性布局Column({space:40})垂直线性布局顶部标题与下方轮播组件垂直间距 40px.width(100%) .height(100%)容器铺满全屏.justifyContent(FlexAlign.Center)垂直方向整体居中.alignItems(HorizontalAlign.Center)水平方向所有子组件居中.padding(20)页面整体内边距 20px内容不贴屏幕边缘。二、核心组件Swiper 轮播图容器1. 循环渲染 ForEach各属性作用index(0)初始化默认展示索引为 0 的轮播页autoPlay(true)自动轮播开关interval(3000)自动切换等待时长单位 msloop(true)无限循环滚动indicator(true)开启底部页码圆点指示器标识当前轮播位置宽高和内部子项统一保证轮播尺寸匹配。三、用到的全部知识点汇总1. 布局容器Column垂直线性布局实现页面上下排版、组件内部文字居中主轴对齐justifyContent(FlexAlign.Center)、交叉轴对齐alignItems。2. 循环渲染ForEach批量根据数组数据生成重复组件简化多图轮播重复代码是鸿蒙列表 / 轮播常用循环语法。3. Swiper 轮播核心组件重点轮播容器支持手动滑动、自动播放、循环、页码指示器常用于首页 banner、图片广告。 核心配置自动播放、切换间隔、循环、指示器、默认索引。4. 样式修饰 API文本fontSize、fontColor边框.border({宽度,颜色})给组件添加边框尺寸固定像素宽高、百分比全屏宽高内边距padding、布局间距space。5. 枚举常量FlexAlign.Center主轴居中对齐Color.Black内置颜色常量。四、预览视觉效果对应页面顶部居中标题文字下方黑色边框矩形轮播框默认展示「轮播图 3」轮播底部显示小圆点指示器蓝色圆点标记当前页面3 秒自动切换、支持左右滑动、无限循环滚动所有内容整体在屏幕正中间四周留有 20px 留白。8.单选框Entry标记当前页面为应用入口页面DevEco 预览器可以直接渲染这个页面。Component声明这是一个自定义 ArkUI 页面组件鸿蒙页面必须添加该装饰器。struct RadioDemo定义页面组件名称 RadioDemo。build(){}页面渲染核心函数页面所有 UI 代码都必须写在build内部页面打开自动渲染。外层 Column ()垂直线性布局容器内部只包含 1 个 Text 水平行 下方.width(100%) .height(100%)让这个垂直容器铺满手机全屏 Column 默认交叉轴水平居中内部 Row 整行会自动在屏幕水平居中。内层 Row () 水平布局你重点标注的这段Row是水平线性布局大括号内所有组件会从左到右横向依次排列Text(性别).fontSize(28)文本组件展示文字「性别」.fontSize(28)设置文字字号 28。Radio({ value: boy, group: sex }).width(30).height(30)单选框组件group:sex分组标识同 group 的 Radio 为互斥单选组只能选中一个value:boy该单选框的标记值选中后用来区分选项.width(30).height(30)单选圆圈宽高 30 像素。Text(男).fontSize(16).margin({right:50})配套文字「男」字号 16.margin({right:50})给文字右侧添加 50px 外边距拉开男女两组选项的横向空白。Radio({ value: gril, group: sex }).width(30).height(30)女性单选框分组同样为sex和男性单选框互斥宽高 30px。Text(女).fontSize(16)配套文字「女」字号 16无右侧外边距。核心逻辑总结布局层级全屏 Column 垂直容器包裹一行 Row 水平布局Row 内部从左到右依次标题文字 → 男单选框 男文字 → 女单选框 女文字Radio 依靠相同group实现性别单选互斥margin({right:50})控制男女选项之间的横向间距所有内容默认在屏幕水平居中展示。9.build () 渲染函数1. 页面基础装饰器Entry标记页面为应用入口页面预览器可直接渲染Component声明该结构体是自定义 ArkUI 页面组件struct jingtaibujuzuoye定义页面组件名称。2. build () 渲染函数页面渲染核心函数页面打开时自动执行内部代码绘制界面。3. 最外层 Column 垂直线性布局Column({space:15})垂直线性布局内部三块内容垂直排列块与块垂直间距 15px.width(100%) .height(100%)容器铺满整个手机屏幕.backgroundColor(0xf5f5f5)页面整体浅灰色底色.borderRadius(12)页面整体圆角.justifyContent(FlexAlign.Center)垂直主轴居中页面所有内容整体在屏幕中间。4. 顶部标题 Text 文本Text(个人信息中心)文本组件展示页面标题.fontSize(22)文字字号 22.fontWeight(FontWeight.Bold)文字加粗.textAlign(TextAlign.Center)文字自身居中.margin({bottom:20})文本底部外边距 20px和下方头像区域拉开距离。5. 头像信息 Row 水平布局Row({space:30})水平线性布局左侧图片、右侧文字横向并排横向间距 30pxImage($r(app.media.xxx))读取项目 media 文件夹本地图片.width(80).height(80)图片正方形尺寸.borderRadius(40)圆角等于宽高一半实现圆形头像内嵌Column({space:20})两行介绍文字垂直排布文字间距 20px。6. 底部按钮 Row 水平布局Row({space:15})水平布局两个按钮横向并排按钮间距 15pxButton(文字)交互按钮.width(150)按钮固定宽度.borderRadius(8)按钮圆角柔和矩形样式。10.按钮Toggle 开关组件type:ToggleType.Switch设置组件样式为滑块开关按钮还有单选框、复选框两种类型可选。isOn:this.isShow绑定State状态变量开关的开启 / 关闭状态和变量同步实现双向绑定。.height(38) .width(80)设置开关按钮整体宽高尺寸。.selectedColor(Color.Red)开关打开时滑块背景显示红色。.onChange((value: boolean){})开关切换时触发的回调函数value是切换后的最新布尔状态 把新值赋值给this.isShow页面文字、文字颜色会同步刷新。该开关按钮用到的知识点Toggle 交互开关组件属于选择类按钮ToggleType 枚举控制按钮外观样式双向状态绑定配合State实现页面实时刷新onChange 点击切换事件监听自定义开关选中颜色、宽高尺寸样式。图片11.文本框文本框代码TextInput({placeholder:请输入账号})文本输入框组件placeholder是输入框空白时显示的灰色提示文字提示用户输入内容。.width(320)输入框宽度 320px。.height(50)输入框高度 50px。.backgroundColor(0xf8f8f8)设置输入框浅灰色背景。.borderRadius(15)输入框圆角做成圆角输入框样式。.padding({left:20})左侧内边距 20px输入文字不会紧贴左边框。密码输入框结构、样式和账号输入框完全一致仅placeholder改为请输入密码用于接收密码内容。文本框运用知识点TextInput输入交互组件接收用户手动输入文字placeholder占位提示文字尺寸样式width、height 控制大小美化样式backgroundColor 背景色、borderRadius 圆角、padding 内边距多输入框复用相同样式简化登录页面布局。12.图片Image 组件代码Image($r(app.media.xxx))Image 是图片组件$r(app.media.资源名)读取项目 resources/media 文件夹下的本地图片资源用于页面展示图片。.width(320)设置图片宽度 320 像素。.height(180)设置图片高度 180 像素。.borderRadius(15)给图片添加圆角让图片边角圆润。.objectFit(ImageFit.Cover)图片适配模式等比例放大图片铺满整个宽高区域超出部分裁剪不会留白拉伸。图片组件相关知识点Image多媒体展示组件加载本地图片$r()本地资源读取语法width、height 控制图片尺寸borderRadius 实现圆角图片效果ImageFit.Cover 图片填充适配枚举避免图片拉伸变形。补充背景图片按钮内的 Image.backgroundImage()给 Button 设置背景图片同样读取 media 本地图片作为按钮背景。13.跳转页面1. 路由导入语句含义导入鸿蒙页面路由模块router该模块专门实现不同页面之间的跳转功能不导入无法使用页面跳转 API。知识点模块导入语法路由跳转依赖官方 router 内置模块。2. 注册页跳转登录页代码逐段含义Text(已有账号立即登录)文本组件充当可点击跳转文字.onClick((){})点击事件点击文字后执行内部跳转代码router.pushUrl({})路由跳转核心方法打开新页面保留当前页面url:pages/LoginPage指定要跳转页面的路由路径跳转到登录页面 LoginPage。3. 登录页跳转注册页代码onClick点击监听点击文字触发跳转router.pushUrl页面入栈跳转url:pages/Resister跳转至注册页面。跳转功能用到的全部知识点路由模块导入import router from ohos.router所有页面跳转必须先导入路由。点击事件 onClick给 Text 文本绑定点击回调文字可作为跳转入口。页面跳转 API pushUrlrouter.pushUrl()打开新页面页面会存入页面栈可返回上一页页面路由地址 urlurl 填写目标页面的 pages 目录路径路径名称必须和页面文件名称一致否则跳转失败。页面双向切换逻辑注册页、登录页互相跳转实现登录注册切换交互。文本样式修饰fontSize 控制跳转文字大小、fontColor 设置浅灰色区分主按传参 参数传递把一段数据数字、文字、对象、数组从代码 A 位置送到代码 B 位置使用这个数据就是参数整个传递过程叫传参。页面跳转传参发起跳转跳转页面时把要带的数据拼在页面地址后面页面加载新页面打开瞬间自动读取地址上附带的数据页面使用拿到数据后渲染页面、查询内容14.选项卡一、什么是选项卡 TabsTabs是系统内置多页面切换容器组件作用在同一个页面内通过顶部 / 底部标签切换多套内容不用跳转新页面支持点击标签、左右滑动切换是 APP 最常用布局之一。三.大核心组成缺一不可判断是不是选项卡的标准Tabs外层总容器控制标签位置、滑动、切换监听TabContent每一块独立页面内容1 个 TabContent 1 个分页.tabBar()绑定在 TabContent 后定义标签显示文字 / 图标顶部选项卡BarPosition.Start登录 / 注册切换、商城分类、新闻多栏目切换标签在页面上方。底部导航选项卡BarPosition.EndAPP 底部导航栏首页、推荐、发现、我的和你截图案例完全一致。四、区分选项卡 vs 普通功能按钮选项卡Tabs有 TabsTabContenttabBar 三层结构点击标签在当前页面切换内容支持滑动。普通 Button 按钮你前两张截图仅独立按钮组件无标签栏点击一般跳转新页面不能切换同页面内多块内容不属于选项卡。五、常见问题与解决标签选中样式不变化缺少State下标变量或.onChange未更新下标无法左右滑动.scrollable(false)修改为true标签不显示TabContent 后没有链式调用.tabBar()切换页面输入框内容清空Tabs 自带缓存清空是你手动重置了输入框绑定变量。六、核心知识点总结三层核心结构Tabs外层容器 TabContent分页 .tabBar()标签barPosition控制标签在页面顶部 / 底部.onChange()监听页面切换TabsController实现代码跳转Builder构造器 State变量自定义标签选中高亮样式判断标准同时存在 Tabs、TabContent、tabBar 才是选项卡。15.导航栏Entry页面入口装饰器标记当前组件为独立页面预览器、路由可直接识别渲染。Component自定义组件装饰器标识这是一个 ArkUI 组件必须搭配build()函数。struct RowBaseArk定义组件结构体组件名大驼峰规范。build()UI 构建函数所有页面布局、组件都写在这个函数内返回组件树Row横向弹性布局容器内部所有子组件水平从左到右排列。{space:30}Row 构造参数控制内部每两个子组件之间的固定间距为 30vp。Text 文本组件显示文字内容.fontSize(25)设置文字字号 25vp。三、链式布局属性Row 的样式修饰.width(100%)百分比宽父容器屏幕宽度完全填充。.height(15%)百分比高度导航栏占页面高度 15%。justifyContent(FlexAlign.Center)Row 主轴是水平方向该属性让内部所有文本整体水平居中。 可选值Start 左对齐、Center 居中、End 右对齐、SpaceBetween 两端分散等。alignItems(VerticalAlign.Center)Row 交叉轴是垂直方向让内部文本在盒子里上下居中。.backgroundColor(0xE8F4FF)设置背景色十六进制颜色格式0xRRGGBB。四、页面效果对应右侧预览器顶部浅蓝色通栏导航栏铺满屏幕宽度“首页、课程、消息、我的” 四个文字横向均匀隔开 30vp文字整体在导航栏盒子水平 垂直双居中这是顶部导航栏NavBar基础实现。五、本次代码学到的核心知识点总结页面基础Entry Component build()三件套固定写法基础布局容器Row 横向布局区分主轴 / 交叉轴对齐间距控制Row 构造参数space快速设置子元素间距尺寸单位百分比宽高100%、固定字号 vp弹性对齐justifyContent主轴、alignItems交叉轴双居中基础组件Text 文本组件、背景色设置开发工具逻辑左侧写 ArkTS 代码右侧实时预览手机页面效果。
