1. Column 垂直布局垂直布局子元素从上到下纵向排列最常用根布局。etsColumn({ space: 10 }) { Text(第一行) Text(第二行) } .width(100%).padding(20)核心space设置内部元素间距。2. Row 水平布局水平布局子元素从左到右横向排列常用于一行多按钮、单选框。etsRow({ space: 15 }) { Button(左) Button(右) }3. RelativeContainer 相对布局通过锚点规则让组件相对其他组件 / 容器摆放适合精准定位。etsRelativeContainer() { Text(顶部文本) .alignRules({ top: { anchor: __container, align: VerticalAlign.Top } }) } .width(100%).height(300)4. Stack 层叠布局组件上下堆叠后写的元素覆盖在前写元素上方适合轮播遮罩、角标。etsStack() { Image($r(app.media.banner)).width(300).height(150) Text(活动标签).fontColor(#fff) }5. Flex 弹性布局自适应分配空间可横向 / 纵向自动均分宽度适配多列列表。etsFlex({ wrap: FlexWrap.Wrap }) { Text(1).width(30%).height(60).backgroundColor(#eee) Text(2).width(30%).height(60).backgroundColor(#eee) Text(3).width(30%).height(60).backgroundColor(#eee) }通用实操步骤页面build方法内只能放一个根布局Column/Row/Stack 等根布局内部嵌套其他布局组合实现页面结构通过space、justifyContent、alignItems控制元素对齐模拟器实时预览排版效果。总结垂直 Column、水平 Row基础线性排版Stack覆盖叠加场景RelativeContainer精准自由定位Flex多列自适应流式布局 搭配之前组件、State、事件、路由可完整搭建页面结构。