个人主页杨利杰YJlio❄️个人专栏《Windows 疑难杂症与工单复盘案例库》 《Sysinternals实战教程》《WINDOWS教程》 《Windows PowerShell 实战》 《IOS插件分析测试》《超简单用Python让Excel飞起来》让复杂的事情更简单让重复的工作自动化文章目录前言先看排列关系再调样式一、先分清线性与层叠布局二、用 Column 阅读纵向内容三、用 Row 阅读横向内容四、用 Stack 表达背景与前景五、把间距、内边距与对齐拆开调六、沿父约束检查尺寸来源七、断点值通过观察确定八、按单项修改留下复现记录学习总结参考资料前言先看排列关系再调样式大家好我是杨利杰 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 在原稿片段里没有定义本篇不补一个未经测量的数字当作通用断点。先在目标窗口里观察文字换行、内容是否完整和操作是否可见再决定布局切换策略。同一设备调整窗口与另一台设备之间还可能存在字体、方向和系统差异。八、按单项修改留下复现记录我会把布局练习的步骤固定下来避免同时改多层后无法解释结果。保留改动前代码和实际入口路径。选择一个容器或一项属性修改。保存并记录当前工程的构建输出。安装启动目标应用确认显示的是本次修改。保存窗口尺寸、画面与完整错误日志。问题先检查内容被覆盖Stack 层级与子项尺寸横向内容超出父宽度、文字与空间分配对齐没有达到预期可用空间、主轴方向和子项总尺寸页面没有变化入口、保存、构建、安装与启动路径只有代码和示意图时记录为待验证构建诊断出现 API 或类型问题时保存原文并查当前版本资料。学习总结本篇我用纵向、横向和层叠三个关系阅读布局分别调整间距、内边距和对齐再沿父约束查尺寸。断点属于后续测量决策不从示意图反推。下一篇继续学习页面尺寸、间距与自适应单位。发布前补齐本机环境、实际构建和运行记录。参考资料华为开发者文档Column 容器华为开发者文档Row 容器版本化参考华为开发者文档Stack 层叠布局版本化参考声明本文为布局学习示例配图为结构示意语法、API、布局与运行结果以当前工程、SDK、实际设备及官方文档为准。返回顶部