企业官网建设流程全解析

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

大家好，我是杨利杰 YJlio。

第11篇我开始比较 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 的重叠是结构关系；遮挡、尺寸和交互命中需要分别检查。

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

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

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

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

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

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

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

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

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

七、断点值通过观察确定

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

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

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

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

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

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

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

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

学习总结

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

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

参考资料

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

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

返回顶部