企业官网建设流程全解析

1. Column 垂直布局（垂直布局）

子元素从上到下纵向排列，最常用根布局。

ets

Column({ space: 10 }) { Text("第一行") Text("第二行") } .width("100%").padding(20)

核心：space设置内部元素间距。

2. Row 水平布局（水平布局）

子元素从左到右横向排列，常用于一行多按钮、单选框。

ets

Row({ space: 15 }) { Button("左") Button("右") }

3. RelativeContainer 相对布局

通过锚点规则，让组件相对其他组件 / 容器摆放，适合精准定位。

ets

RelativeContainer() { Text("顶部文本") .alignRules({ top: { anchor: "__container", align: VerticalAlign.Top } }) } .width("100%").height(300)

4. Stack 层叠布局

组件上下堆叠，后写的元素覆盖在前写元素上方，适合轮播遮罩、角标。

ets

Stack() { Image($r("app.media.banner")).width(300).height(150) Text("活动标签").fontColor("#fff") }

5. Flex 弹性布局

自适应分配空间，可横向 / 纵向，自动均分宽度，适配多列列表。

ets

Flex({ 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") }

通用实操步骤

1. 页面build方法内只能放一个根布局（Column/Row/Stack 等）；
2. 根布局内部嵌套其他布局，组合实现页面结构；
3. 通过space、justifyContent、alignItems控制元素对齐；
4. 模拟器实时预览排版效果。

总结

• 垂直 Column、水平 Row：基础线性排版
• Stack：覆盖叠加场景
• RelativeContainer：精准自由定位
• Flex：多列自适应流式布局 搭配之前组件、@State、事件、路由，可完整搭建页面结构。