前言：同一个数值，先确认单位

大家好，我是杨利杰 YJlio。

第12篇我继续看页面尺寸与间距。同样写一个数字，可能表示布局长度、字体大小，也可能是某个接口返回的物理像素。只记数值、不记单位，换一个窗口后就容易误判。

原稿的文本处理函数与尺寸主题没有直接关系。本篇保留原稿，重新组织尺寸学习内容；新增片段用于说明阅读与操作方法，未进行本机编译和设备运行。

尺寸值要连同单位、接口和父约束一起阅读，不能只比较数字。

环境项	实际记录
DevEco Studio、SDK/API	待填写
工程入口与组件声明	待填写
设备、系统与窗口尺寸	待填写
字体设置与构建结果	待填写

一、先区分 px、vp、fp 与百分比

我先查接口所处的开发范式，避免把不同框架里的同名单位混在一起。

表达	ArkUI 学习中关注的含义
px	屏幕物理像素
vp	与屏幕密度相关的虚拟像素
fp	字体像素，与字体缩放设置有关
百分比	相对参考尺寸，需查具体属性

华为ArkUI 像素单位参考介绍了像素单位及转换。该版本化资料用于解释基本概念；当前 API 能力和调用位置仍按实际工程核对。

这里不讨论旧式 HML/CSS 的逻辑像素规则，也不把它套进 ArkTS 声明式布局。尺寸数值最终如何映射，还需结合设备密度、字体设置和接口说明判断。

二、数字参数不能统一当成 px

我会先看参数类型和说明，再决定是否需要显式单位。

许多 ArkUI 布局长度采用 vp，字体属性又可能采用 fp；但窗口、图片或底层接口的数值可能采用别的单位。不要只凭变量名 width 或 height 推断单位。

阅读顺序	要确认的内容
参数类型	是否接受数字、字符串、资源或其他类型
单位说明	默认单位与支持的单位
支持范围	当前组件、属性和 API 版本
实际观察	使用同一单位记录前后变化

转换前先查来源单位与目标单位，不重复转换。实际 SDK 若提供不同转换入口，应使用对应版本文档，本文不凭空指定导入路径。

三、百分比尺寸先看父约束

我把百分比理解为“相对于参考区域”，然后查该属性的参考尺寸。

子组件 width(‘100%’) 与父容器可用宽度有关，不能直接写成占满物理屏幕。外层容器、页面内容区域与其他约束都会影响实际空间。

百分比支持及计算基准也要按具体属性核对。宽度、字体、内边距等参数不能仅因为都接受字符串，就假定有同样的百分比语义。

百分比不是自动适配保证；先确认参考尺寸，再观察内容是否完整可见。

如果百分比宽度再叠加外边距，应检查总占用。华为margin 问题分析给出了满宽子组件与左右外边距的案例，可用来理解为何要从父约束和占用区域排查。

四、padding、margin 与 space 分别调整

三个参数都影响空白，但对应的是不同关系。

参数	本篇观察对象
padding	容器内容与边界之间的内边距
margin	组件外侧与周围布局之间的外边距
space	容器同级子项间距

我先确定空白出现在容器内部、组件外部还是两个子项之间，再改对应参数。不一次同时加大三项，否则很难解释是哪项产生了变化。

外边距不是给内容区域增加内部空间；space 也不能代替容器四周的 padding。实际布局的测量、方向和属性顺序仍需结合当前接口与工程观察。

五、用两段文字做最小尺寸练习

先减少组件数量，保留标题和说明两个同级子项。

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

Column({ space: 12 }) {
  Text('标题')
    .fontSize(22)
  Text('说明')
    .fontSize(16)
}
.width('100%')
.padding(24)

12、22、16 和24均为演示配置，不是跨设备通用推荐值。配图仅表达两个子项与容器关系，没有表示真实比例或设备上的文字尺寸。

先只改变内边距，记录内容区域变化；恢复后再只改变子项间距。比较时保持同一窗口、字体和其他属性，以免把环境差异当成参数效果。

六、观察字体缩放后的换行与可见性

文字大小与布局空间需要一起检查，不能只确认字变大了。

fp 与字体缩放设置有关，但这不意味着使用 fp 就能自动解决所有排版问题。父宽度、文字长度、行数限制和容器高度都会影响可见内容。

我会在设备允许的字体设置下观察标题是否换行、说明是否完整，以及操作区域是否仍能到达。本文没有记录实际效果，因此这些项目保留为待填写。

字体缩放与窗口变化都要检查内容可见性，不能只检查外观。

若业务需要裁切或限制行数，要记录规则与完整内容的获取方式，不用示意图替读者证明可用性。

七、在窄宽窗口里记录同一组内容

我使用相同文案和组件结构，只改变可用窗口条件，分别保存观察结果。

记录项	较窄窗口	较宽窗口
窗口尺寸及单位	待填写	待填写
标题与说明换行	待填写	待填写
内容是否完整可见	待填写	待填写
内外边距表现	待填写	待填写
字体与方向设置	待填写	待填写

不凭一个固定数字宣称完成自适应。需要切换布局时，先观察内容，再根据目标设备测量断点，保留触发条件与实际证据。

不同设备之间的比较还涉及密度、系统、字体和可用区域，不能只记录屏幕分辨率就认为条件相同。

八、尺寸异常沿约束逐层排查

遇到宽度超出或内容被截断，我先检查父约束，再逐层看具体尺寸。

1. 核对窗口数值的来源和单位。
2. 查看父容器提供的可用宽高。
3. 查看当前容器的宽度、内外边距设置。
4. 查看子组件文字、字体、换行与尺寸限制。
5. 一次只改一项，记录实际构建和运行结果。

现象	先检查
满宽组件加边距后超出	父可用宽度与总占用
字体放大后内容不完整	容器空间、换行和限制
换窗口后比例异常	百分比参考区域与单位
改代码但画面未变	保存、构建、安装与启动工程

保留完整错误输出与前后代码；仅有学习片段和概念图时，不能记成已通过设备验证。

学习总结

本篇我把单位、百分比参考、三类间距和窗口观察分开处理。每次比较都保留接口、单位、父约束和实际环境，尺寸变化才有可解释的依据。

下一篇继续学习页面颜色、字体与基础样式。发布前补齐实际环境和设备记录。

参考资料

1. 华为开发者文档：ArkUI 像素单位（版本化参考）
2. 华为开发者文档：组件 margin 问题分析
3. 华为开发者文档：Column 容器

---

声明：本文为学习示例，配图为结构示意；单位、参数、构建和运行结果以当前工程、SDK、实际设备及官方文档为准。

返回顶部