一、引言

最后这一篇，我们聚焦三个「高级但容易被忽视」的场景：border 的尺寸计算机制、多层嵌套时的约束传递、以及 scale 缩放与 width('100%') 的交互。

这三个场景的共同特点是：它们都涉及 width('100%') 与另一个装饰性属性（border/嵌套/scale）共存时的行为。理解这些边界情况的交互，能帮助你在遇到罕见的布局 bug 时快速定位原因。

---

二、场景⑦：width(‘100%’) + border 的尺寸计算

2.1 实验目的

在 CSS 中，border 是否增加元素的总宽度取决于 box-sizing 属性的值。ArkUI 中是否有类似的概念？border 是画在「框内」还是「框外」？

2.2 完整代码

// ──────────────────────────────────────
// 场景 ⑦：border 的尺寸计算
// ──────────────────────────────────────
Column() {
  // 子 Column A：width('100%') + 无 border（对照组）
  Column() {
    Text('无 border · width(\'100%\')')
      .fontSize(11).fontColor('#333')
      .textAlign(TextAlign.Center)
      .width('100%')
      .lineHeight(32)
  }
  .width('100%')
  .backgroundColor('#E8F5E9')
  .borderRadius(4)
  .margin({ bottom: 6 })

  // 子 Column B：width('100%') + border（实验组）
  Column() {
    Text('border(3) · width(\'100%\')')
      .fontSize(11).fontColor('#333')
      .textAlign(TextAlign.Center)
      .width('100%')
      .lineHeight(32)
  }
  .width('100%')
  .backgroundColor('#FFF3E0')
  .border({ width: 3, color: '#FF9800' })
  // ★ 边框在内部，不增加总宽度
  .borderRadius(4)
}
.width('100%')
.padding(8)
.backgroundColor('#F5F5F5')
.borderRadius(8)

2.3 运行结果分析

对照组（无 border）和实验组（border: 3）的两个 Column，总宽度完全一致。边框的 3vp 宽度没有向外挤压，而是向内绘制。

这意味着 ArkUI 的 border 行为等价于：

CSS box-sizing: border-box 下的 border 行为

总是包含在 width 值之内的。

2.4 ArkUI 盒模型的完整描述

ArkUI 中每个组件在水平方向上的盒模型结构如下（从外到内）：

┌─────────────────────────────────┐
│         总占用宽度                │
│  ┌─────── 父容器分配宽度 ──────┐ │
│  │  margin (外间距, 透明)      │ │
│  │  ┌──────────────────────┐  │ │
│  │  │ border (边框)         │  │ │
│  │  │  ┌────────────────┐  │  │ │
│  │  │  │ padding (内边距)│  │  │ │
│  │  │  │  ┌──────────┐  │  │  │ │
│  │  │  │  │  content  │  │  │  │ │
│  │  │  │  │   (内容)  │  │  │  │ │
│  │  │  │  └──────────┘  │  │  │ │
│  │  │  └────────────────┘  │  │ │
│  │  └──────────────────────┘  │ │
│  └────────────────────────────┘ │
└─────────────────────────────────┘

关键尺寸关系：

• 父容器分配宽度 = width('100%') 的基数
• content = 父容器分配宽度 - padding 左右 - border 左右
• 总占用宽度 = 父容器分配宽度 + margin 左右

对比 CSS：

属性	CSS (box-sizing: content-box)	CSS (box-sizing: border-box)	ArkUI
width 含义	仅内容区	内容 + padding + border	类似 border-box
border 增加总宽	✅ 是	❌ 否	❌ 否
padding 增加总宽	✅ 是	❌ 否	❌ 否
margin 增加总宽	✅ 是	✅ 是	✅ 是

2.5 实战意义

知道 border 在内部绘制后，可以放心地在 width('100%') 的组件上添加边框，而不用担心它撑大组件、破坏布局。例如，实现一个「全宽卡片 + 底部边框」的效果：

Column() {
  // 内容
}
.width('100%')
.border({ width: { bottom: 1 }, color: '#E0E0E0' })
// 放心使用，边框不增加总宽度

---

三、场景⑧：width(‘100%’) 在深层嵌套中的约束传递

3.1 实验目的

三层 Column 嵌套，每层都设 width('100%') 和不同的 padding。观察最内层的宽度如何被外层逐层影响。

3.2 完整代码

// ──────────────────────────────────────
// 场景 ⑧：深层嵌套的约束传递
// ──────────────────────────────────────
// 第 1 层：最外层（蓝色）
Column() {
  Text('第 1 层（蓝色）')
    .fontSize(11).fontColor('#fff')
    .textAlign(TextAlign.Center)
    .width('100%')
    .lineHeight(28)

  // 第 2 层（绿色）
  Column() {
    Text('第 2 层（绿色），有 padding')
      .fontSize(11).fontColor('#fff')
      .textAlign(TextAlign.Center)
      .width('100%')
      .lineHeight(26)
      .margin({ bottom: 4 })

    // 第 3 层（粉色）
    Column() {
      Text('第 3 层（粉色），width(\'100%\') = 第 2 层内容区宽度')
        .fontSize(10).fontColor('#fff')
        .textAlign(TextAlign.Center)
        .width('100%')
        .lineHeight(24)
    }
    .width('100%')
    .backgroundColor('#FFB6C1')
    .borderRadius(4)
  }
  .width('100%')
  .padding({ left: 16, right: 16, top: 8, bottom: 8 })
  .backgroundColor('#4CAF50')
  .borderRadius(4)
  .margin({ top: 6 })
}
.width('100%')
.padding(10)
.backgroundColor('#42A5F5')
.borderRadius(8)

3.3 宽度逐层递减的计算

假设屏幕宽度为 360vp，最外层的 Scroll 没有额外 padding（或已在 Scroll 层扣除）：

第 1 层（蓝色）：
  width('100%') = 360vp（假设最外层没有 padding）
  padding: 10vp 左右 → 内容区 = 360 - 20 = 340vp

第 2 层（绿色）：
  width('100%') = 340vp（从第 1 层的内容区继承）
  padding: 16vp 左右 → 内容区 = 340 - 32 = 308vp

第 3 层（粉色）：
  width('100%') = 308vp（从第 2 层的内容区继承）
  没有 padding → 内容区 = 308vp

最终，粉色条的实际宽度 = 308vp，比最外层的 360vp 少了整整 52vp。这 52vp 去哪了？

20vp（第 1 层 padding 左右）+ 32vp（第 2 层 padding 左右）= 52vp

3.4 约束传递机制（Constraint Propagation）

ArkUI 的布局系统使用一种称为「约束传递」（constraint propagation）的机制：

1. 父容器接收来自祖父容器的约束（最小宽度、最大宽度、首选宽度）。
2. 父容器扣除自己的 padding，计算出内容区的约束。
3. 父容器将内容区的约束传递给每个子组件。
4. 子组件根据接收到的约束计算自己的布局。
5. 子组件扣除自己的 padding，继续向下传递约束。

这个过程递归进行，直到所有叶子节点都完成布局。

3.5 典型陷阱：多层嵌套导致内容过窄

在实际项目中，常见的陷阱是：

Scroll() {
  Column() {       // 第 1 层
    .padding(16)
    Column() {     // 第 2 层
      .padding(12)
      Column() {   // 第 3 层
        .padding(12)
        Text('内容')  // 实际可用宽度 = 屏幕宽 - 80vp
      }
    }
  }
}

3 层 padding 共吃掉 80vp（16+12+12 再乘以 2），在 360vp 宽的屏幕上，Text 的实际可用宽度只有 280vp。如果设备屏幕再窄一些（如折叠屏展开后的一半），内容可能被严重挤压。

解决方案：

• 只在最外层设置页面级 padding，内部尽量使用 Column 的 space 属性来控制间距。
• 如果必须多层嵌套 padding，考虑使用 layoutWeight 来保证最小内容宽度。
• 在 QA 测试时，特别检查窄屏设备上的布局表现。

---

四、场景⑨：width(‘100%’) + Scale 缩放的影响

4.1 实验目的

scale 属性可以放大或缩小组件的视觉尺寸。当它与 width('100%') 一起使用时，布局占位和视觉表现之间是什么关系？

4.2 完整代码

// ──────────────────────────────────────
// 场景 ⑨：scale 缩放
// ──────────────────────────────────────
Column() {
  // 原始大小参照（scale: 1.0）
  Column() {
    Text('原始大小（scale: 1.0）')
      .fontSize(11).fontColor('#fff')
      .textAlign(TextAlign.Center)
      .width('100%').lineHeight(30)
  }
  .width('100%')
  .backgroundColor('#4CAF50')
  .borderRadius(4)
  .margin({ bottom: 6 })

  // scale 缩小（scale: 0.6）
  Column() {
    Text('scale(0.6) — 视觉缩小但占位不变')
      .fontSize(11).fontColor('#fff')
      .textAlign(TextAlign.Center)
      .width('100%').lineHeight(30)
  }
  .width('100%')
  .backgroundColor('#FF9800')
  .borderRadius(4)
  .scale({ x: 0.6, y: 1 })
  .margin({ bottom: 6 })

  // scale 放大（scale: 1.5）—— 可能溢出
  Column() {
    Text('scale(1.5) — 视觉放大，可能溢出边界')
      .fontSize(11).fontColor('#fff')
      .textAlign(TextAlign.Center)
      .width('100%').lineHeight(30)
  }
  .width('100%')
  .backgroundColor('#F44336')
  .borderRadius(4)
  .scale({ x: 1.5, y: 1 })
  .clip(true)  // 防止视觉溢出破坏布局
}
.width('100%')
.padding(8)
.backgroundColor('#F5F5F5')
.borderRadius(8)

4.3 运行结果分析

运行结果展示了三条等宽的色带：

1. 绿色条（scale: 1.0）：正常显示，正好填满父内容区。
2. 橙色条（scale: 0.6）：视觉上宽度被压缩到 60%，但下面的说明文字告诉我们「占位不变」——父容器给这条 Column 分配了完整的 100% 宽度，Column 的布局占位也是完整的 100%，只是绘制时缩放了。
3. 红色条（scale: 1.5）：视觉上宽度被放大到 150%，超出了父容器的边界。但由于设置了 .clip(true)，超出部分被裁剪，没有影响后续布局。

4.4 scale 与 layout 的解耦

这是 ArkUI 中一个非常重要的设计原则：scale 操作的是「绘制变换矩阵」，而不改变「布局尺寸」。

• width('100%') 在布局阶段确定：组件占据父容器内容区的 100% 宽度，这个占位是确定的、不可变的。
• scale 在绘制阶段应用：将已经确定好位置的组件内容，按照比例进行缩放绘制。

因此，scale 不影响父容器对这个组件的大小认知，也不影响兄弟组件的布局位置。

4.5 scale 的视觉溢出处理

当 scale > 1.0 时，视觉上组件会「伸出」自己的布局边界。如果不加处理，它可能会覆盖旁边的组件。

处理方式：

// 方案一：裁剪（clip）
.scale({ x: 1.5 })
.clip(true)          // 裁剪超出部分，不影响其他组件

// 方案二：使用 transform 而非 scale（效果类似，同样不改变布局）
.transform({
  scale: { x: 1.5, y: 1 }
})

4.6 scale 的实际应用场景

虽然 scale 不改变布局，但它在以下场景中非常有用：

1. 按压动画效果：按钮按下时 scale(0.95)，弹起时 scale(1.0)，通过动画让按钮有「按下感」。
2. 焦点放大效果：列表中当前聚焦的卡片 scale(1.05)，其他卡片 scale(1.0)。
3. 加载态骨架屏：使用 scale 模拟闪烁效果。
4. 页面转场动画：配合 transition 使用 scale 实现页面淡入缩放效果。

示例：按钮按压动画

@State isPressed: boolean = false;

Button('登录')
  .width('100%')
  .scale(this.isPressed ? { x: 0.96, y: 0.96 } : { x: 1.0, y: 1.0 })
  .animation({ duration: 150, curve: Curve.EaseInOut })
  .onTouch((event: TouchEvent) => {
    this.isPressed = event.type === TouchType.Down;
  })

---

五、第三篇总结

编号	场景	核心结论
⑦	border 盒模型	border 在内容区内绘制，不增加总宽度（类似 CSS 的 border-box）
⑧	深层嵌套约束传递	每层 padding 逐层扣减可用宽度，最内层可能远小于外层宽
⑨	scale 缩放	scale 只改变视觉绘制，不改变布局占位；大比例缩放可能溢出

---

全系列总结（三篇贯通）

速查表：width('100%) 的 9 个场景

场景	分类	一句话总结
① 有 / 无 width 对比	基础认知	无 width = 内容宽度；有 width(‘100%’) = 父内容区宽度
② 固定宽度父容器	基础认知	width(‘100%’) = 父固定宽 − 父 padding
③ 父容器有 padding	常见陷阱	padding 被自动扣除，子组件安全适应
④ width + margin 溢出	常见陷阱	margin 在 100% 之外附加，总宽度会超出
⑤ Row 中 vs layoutWeight	弹性分配	width(‘100%’) 不争取空间，layoutWeight 才争取
⑥ alignItems 的影响	属性交互	设了 width(‘100%’) 后，alignItems 不再改变宽度
⑦ border 尺寸计算	盒模型	border 在内容区内绘制，不增加总宽
⑧ 深层嵌套传递	约束传递	每层 padding 逐层扣减，理解公式防踩坑
⑨ scale 缩放	绘制 vs 布局	scale 只改变视觉，不改变布局占位

五条黄金规则

1. width('100%') = 父容器内容区宽度，不是屏幕宽度，父容器的 padding 已被扣除。
2. Row 中 width('100%') ≠ layoutWeight(1)，两者需配合使用。
3. width('100%') + margin 可能溢出，margin 在外，width 在内容区，互不抵消。
4. width('100%') + border 不溢出，border 在内部绘制，放心使用。
5. 设了 width('100%') 后，alignItems 不影响宽度，因为已无剩余空间可调整。

最终建议

遇到宽度不符合预期时，按以下顺序排查：

1. 检查父容器的宽度——父容器是否已经占满？
2. 检查父容器的 padding——padding 吃掉了多少可用宽度？
3. 检查组件的 margin——margin 是否在 width(‘100%’) 之外额外占用了空间？
4. 检查组件的定位方式——是否在 Row 中？是否忘了加 layoutWeight？
5. 检查嵌套层级——是否有多层 padding 叠加，把可用宽度压到了极小值？

记住心法：width('100%') = 父内容区的 100%。