DevEco Studio鸿蒙中布局代码具体步骤

布局一、鸿蒙 ArkTS 基础布局总述在 HarmonyOS ArkTS 开发中布局容器是页面 UI 排版的核心载体所有文本、图片、按钮等组件都必须放置在布局容器内进行有序排列。系统提供 5 类常用基础布局分别为垂直布局、水平布局、相对布局、层叠布局、弹性布局。通用核心布局规则单页面唯一根布局规则任意页面的build()函数中只能存在一个顶层根布局容器不允许并列多个根布局布局嵌套规则可在根布局容器内部无限嵌套其他任意布局容器通过多层嵌套组合实现复杂页面排版布局通用属性所有布局容器均支持width、height、padding、margin、justifyContent、alignItems等通用样式控制组件对齐、间距与尺寸。二、五大布局详细介绍1. 垂直布局 Column组件标识Column()排列规则内部所有子组件 ** 沿垂直方向从上至下** 依次排列。适用场景页面正文图文上下排版如学校简介、详情介绍页面表单输入框纵向排列列表、轮播 文字组合页面。核心对齐属性.justifyContent(FlexAlign.Center)垂直居中.alignItems(ItemAlign.Center)水平居中最简示例代码etsColumn(){Text(第一行文字)Text(第二行文字)}.width(100%).padding(15)2. 水平布局 Row组件标识Row()排列规则内部所有子组件 ** 沿水平方向从左至右** 依次排列。适用场景顶部导航栏 、底部标签栏按钮组、横向功能选项图片 文字横向组合卡片。核心对齐属性.justifyContent(FlexAlign.SpaceEvenly)组件均匀平分横向空间.alignItems(ItemAlign.Center)垂直居中最简示例代码etsRow(){Text(按钮1)Text(按钮2)Text(按钮3)}.width(100%)3. 相对布局 RelativeContainer组件标识RelativeContainer()排列规则不固定排布方向通过给每个子组件设置 ID、锚点关系控制组件相对位置左、右、上、下、居中。适用场景复杂精准定位页面例如登录页 logo、输入框、按钮错落排版不规则卡片布局。特点自由度最高适合无法用 Row/Column 简单实现的不规则界面。4. 层叠布局 Stack组件标识Stack()排列规则所有子组件在同一坐标位置层层堆叠代码后书写的组件会覆盖在先写组件上方。适用场景轮播图底部小圆点指示器图片上方叠加文字水印 / 标题弹窗浮层、遮罩层最简示例代码图片叠加文字etsStack(){Image($r(app.media.school)).width(100%).height(180)Text(校园风光 ).fontSize(22).fontColor(Color.White)}5. 弹性布局 Flex组件标识Flex()排列规则可自由切换 水平 / 垂直主轴方向支持子组件自动换行、自动均分剩余空间兼具 Row 与 Column 能力是自适应页面首选布局。核心控制属性.direction(FlexDirection.Row)水平排列.direction(FlexDirection.Column)垂直排列.wrap(FlexWrap.Wrap)子组件自动换行适用场景多设备自适应页面、多标签自动换行、商品网格布局。三、布局开发常见易错点报错多个根布局错误写法etsbuild(){Column(){ Text(内容) }Row(){ Text(按钮) }}解决将其中一个布局作为根容器把另一个布局嵌套进内部。组件超出屏幕显示不全给根布局添加width(100%)铺满屏幕宽度搭配padding控制边距避免内容贴边。四、总结五种布局各有专属使用场景开发页面时优先选择Column、Row完成基础排版遇到叠加效果使用Stack自适应多组件换行使用Flex需要精准不规则定位时使用RelativeContainer。所有页面必须严格遵守单一根布局规则通过嵌套组合完成全部 UI 开发。