前言：先看排列关系，再调样式

大家好，我是杨利杰 YJlio。

第11篇我开始比较 Column、Row 与 Stack。三个容器最容易看出的区别是：纵向排列、横向排列和层叠。先确认子组件是什么关系，再考虑间距与对齐，排查时会更清楚。

本篇依据原稿主题补充最小结构片段，便于阅读与练习；原稿只有断点判断伪代码，没有设备运行证据。下面不会把新增示例写成已经在设备验证。

布局示意能说明组件关系，不能替代真实窗口尺寸、构建结果与运行截图。

环境项	实际记录
DevEco Studio、SDK/API	待填写
模板入口与组件声明	待填写
设备、系统与窗口	待填写
构建及运行结果	待填写

一、先分清线性与层叠布局

我先把三种容器的用途放在一起看。

容器	本篇关注的排列关系	练习内容
Column	纵向线性排列	标题、说明、操作
Row	横向线性排列	标签、内容
Stack	同一区域层叠	背景、前景标签

华为Column 文档说明了纵向容器；Stack 布局说明介绍了叠加关系。引用中的版本化资料用于解释基础结构，实际接口支持范围仍需按工程 API 核对。

不要仅凭最终截图猜容器：不同嵌套方式可能形成相近画面，源代码里的父子关系更适合定位。

二、用 Column 阅读纵向内容

我把标题、说明和操作放在同一层，从上到下阅读它们。

以下为 build() 内的学习片段，不是完整入口文件。保留当前模板的组件声明再加入片段。

Column({ space: 12 }) {
  Text('标题')
  Text('说明')
  Button('操作')
}
.padding(24)

space: 12 与 padding(24) 是本篇演示值，不是所有页面的推荐尺寸，也不是设备实测数据。按钮只用于表现操作区域，没有绑定业务事件。

子组件总尺寸超过容器可用空间时，还要观察溢出与布局约束；不能以为设置对齐后，所有内容一定完整可见。

三、用 Row 阅读横向内容

标签和内容适合先用两个同级子组件观察横向排列。

Row({ space: 12 }) {
  Text('标签')
  Text('内容')
}
.padding(24)

这个片段没有加入固定宽度或自动伸缩策略。文字较长时的换行、裁切与剩余空间分配，需要在父约束下观察，不能只从两个短字符串推断长内容表现。

图中从左向右是阅读示意，实际起始方向还需结合布局方向和工程设置判断。Row 与 Column 的主轴方向不同，对齐属性的意义也要按容器理解。

四、用 Stack 表达背景与前景

我把两块内容放进同一区域，观察层级而不是顺序排队。

Stack({ alignContent: Alignment.Center }) {
  Text('背景')
    .width('100%')
    .height(120)
    .backgroundColor('#E8F0FE')
  Text('前景标签')
}
.width('100%')

height(120) 与颜色是新增学习片段的演示配置，图中不表达真实比例。前景标签与背景共享区域，位置由容器对齐和子组件属性共同影响。

基础叠加顺序还可能被 zIndex 等设置改变。内容被遮住时，应查看兄弟组件层级和尺寸，不要立即判断数据丢失。交互区域也要结合真实画面确认。

Stack 的重叠是结构关系；遮挡、尺寸和交互命中需要分别检查。

五、把间距、内边距与对齐拆开调

我不会把所有属性一次改完，而是先判断需要改变哪种关系。

属性关系	观察对象
space	同级子项之间
padding	容器内容与边界之间
主轴对齐	沿容器排列方向
交叉轴对齐	与排列方向垂直的方向

Column 的主轴是纵向，Row 的主轴是横向。对齐参数的具体枚举类型和支持版本按各组件接口确认，不把 Column 的写法无条件搬到 Row。

先保留其他属性不变，修改一项并记录效果。若属性调用顺序影响布局或绘制，也应查当前接口说明并用最小例子核对。

六、沿父约束检查尺寸来源

画面比预期窄、宽或高时，我先找当前容器的可用区域。

从窗口到父容器，再到当前容器与子组件，是一条便于阅读的检查路径。窗口之外还可能有页面内容区域、系统区域或其他父布局限制，必须结合实际工程判断。

百分比尺寸依赖父布局提供的约束。width(‘100%’) 不等于无条件占满物理屏幕，也不保证各种窗口下显示相同。

检查项	本机记录
父容器可用尺寸	待填写
当前容器尺寸设置	待填写
子项换行与可见性	待填写

尺寸异常先查父约束，再查当前容器，最后查子组件。

七、断点值通过观察确定

原稿提供了窄宽窗口判断思路，但没有窗口宽度来源和实测阈值。

读取并记录实际窗口宽度
与已测量的断点比较
较窄：评估单栏
较宽：评估列表与详情并列

这是流程伪代码，不是可直接编译的 ArkTS。windowWidth 和 measuredBreakpoint 在原稿片段里没有定义；本篇不补一个未经测量的数字当作通用断点。

先在目标窗口里观察文字换行、内容是否完整和操作是否可见，再决定布局切换策略。同一设备调整窗口与另一台设备之间，还可能存在字体、方向和系统差异。

八、按单项修改留下复现记录

我会把布局练习的步骤固定下来，避免同时改多层后无法解释结果。

1. 保留改动前代码和实际入口路径。
2. 选择一个容器或一项属性修改。
3. 保存并记录当前工程的构建输出。
4. 安装启动目标应用，确认显示的是本次修改。
5. 保存窗口尺寸、画面与完整错误日志。

问题	先检查
内容被覆盖	Stack 层级与子项尺寸
横向内容超出	父宽度、文字与空间分配
对齐没有达到预期	可用空间、主轴方向和子项总尺寸
页面没有变化	入口、保存、构建、安装与启动路径

只有代码和示意图时，记录为待验证；构建诊断出现 API 或类型问题时，保存原文并查当前版本资料。

学习总结

本篇我用纵向、横向和层叠三个关系阅读布局，分别调整间距、内边距和对齐，再沿父约束查尺寸。断点属于后续测量决策，不从示意图反推。

下一篇继续学习页面尺寸、间距与自适应单位。发布前补齐本机环境、实际构建和运行记录。

参考资料

1. 华为开发者文档：Column 容器
2. 华为开发者文档：Row 容器（版本化参考）
3. 华为开发者文档：Stack 层叠布局（版本化参考）

---

声明：本文为布局学习示例，配图为结构示意；语法、API、布局与运行结果以当前工程、SDK、实际设备及官方文档为准。

返回顶部