一、Stack层叠布局：把组件叠起来就对了

Stack的逻辑就是：所有子组件按顺序叠，后写的组件在最上面，你可以统一控制所有子组件在容器里的对齐方式。就像你往桌子上放东西，第一张放纸，第二张放照片，第三张放贴纸，谁后放谁在上面，就这么简单。

Stack的核心逻辑：所有子组件按照书写顺序依次层叠，后写的组件会叠在先写组件的上方，同时可以统一设置所有子组件在Stack容器内的对齐方式，这份示例代码用了默认居中对齐，刚好形成三层叠加的效果。

最常见的使用场景 做需要叠加元素的界面：比如带角标的卡片、图片上加文字、弹出的浮窗，都用Stack。

例如

这些是课上做的一些例子

我的使用心得：
只要你需要一个东西盖在另一个东西上面——不管是做浮标、带文字的封面、还是弹窗蒙层，第一个想Stack准没错，不用写一堆定，对齐方式选好就搞定，比其他布局省太多代码了

二、Flex弹性布局：不用算位置，自动排好队

Flex就像一排会自己挤位置的橡皮糖：你只要说清楚「横着排还是竖着排」「放不下要不要换行」，剩下的位置分配它自己搞定，屏幕变大它自动拉开，屏幕变小它自动挤，永远不会乱掉。 新手不用记一堆属性，先搞懂三个最核心的，记住就能用：

1. direction：排的方向，横着排就选Row，竖着排选Column

2. wrap：放不下怎么办？选Wrap就是自动换行，选NoWrap就是挤也要挤在一行

3. justifyContent：怎么对齐？两端均匀留空格选SpaceBetween，居中选Center，从开头排选Start  最常见的使用场景 需要自动适配的列表：

比如标签组、商品宫格、多行按钮组，都用Flex，比手动写位置省心一百倍。

例如

三、RelativeContainer相对布局：对着参照物摆位置 什么是RelativeContainer？

一句话讲清楚 这个是ArkUI里最灵活的布局，你只要说清楚：你这个组件，要靠哪个参照物摆位置可以靠父容器，也可以靠其他组件，想放哪就放哪，精准对齐不会错。

新手一定要记住这个规则：每个要定位的组件，只需要说清「水平方向」和「垂直方向」怎么放就够了，格式永远是：  

.alignRules({
  水平方向（left/right/center）: { 对齐规则 },
  垂直方向（top/bottom/center）: { 对齐规则 }
})
  两种最常用的对齐规则，看完就会：

1. 靠父容器对齐：只需要写{ align: 对齐类型 }，比如靠父容器顶部就是top: { align: AlignLayoutDirection.Top }

2. 靠其他组件对齐：给参考组件加个id，然后写{ anchor: "参考组件的id", align: 对齐类型 }，比如我的顶在别人的底就是top: { anchor: "参考id", align: VerticalAlign.Bottom }

最常见的使用场景 需要精准对齐的复杂界面：比如登录页、信息表单、带层叠元素的卡片，RelativeContainer能精准实现设计稿的要求。

这篇文章我们从HarmonyOS ArkTS开发的基础布局入手，系统讲解了Stack层叠布局、Flex弹性布局、RelativeContainer相对布局这三种最核心布局的特性和用法：

Stack通过层叠顺序解决了组件堆叠的需求，适合做轮播图、浮层卡片这类需要叠加显示的场景；
Flex以弹性流式的排列方式，天然适配不同屏幕尺寸，是做多栏、均分、流式排列界面的首选；
RelativeContainer则依靠锚点相对定位，能精准控制每个元素的位置，对对齐要求高的复杂界面支持更好。

总的来说，三种布局没有绝对的优劣，在实际开发中通常会组合使用，根据界面的具体需求选择最合适的布局方式，就能高效搭出结构清晰、适配性好的HarmonyOS应用界面。