一、引言

第一篇文章中我们建立了 width('100%') = 父容器内容区宽度 的核心认知。但实际开发中，仅仅知道这个公式还不够——因为你还要面对 margin、Row 的弹性分配机制、以及 alignItems 这些「外部因素」对宽度的影响。

本文将覆盖三个关键场景：

• 场景④：width('100%') + margin → 子组件溢出父容器
• 场景⑤：Row 中 width('100%') ≠ layoutWeight(1) → 弹性分配机制
• 场景⑥：不同 alignItems 对 width('100%') 的影响

这三个场景揭示了同一个问题的不同侧面：width('100%') 只控制「自身内容区的宽度」，但它无法控制「自身之外的空间占用」（如 margin），也无法改变父容器的分配策略（如 Row 的 layoutWeight）。

---

二、场景④：width(‘100%’) + margin 的溢出陷阱

2.1 实验目的

父容器设置 padding，子 Column 设置 width('100%') 加 margin(left: 10)——观察子组件是否会超出父容器的视觉边界。

2.2 完整代码

// ──────────────────────────────────────
// 场景 ④：margin 溢出陷阱
// ──────────────────────────────────────
Column() {
  // 父容器：有明显边界，方便观察溢出
  Column() {
    // 正常子 Column（无 margin）——对照组
    Column() {
      Text('无 margin，正好在框内')
        .fontSize(11).fontColor('#fff')
        .textAlign(TextAlign.Center)
        .width('100%')
        .lineHeight(30)
    }
    .width('100%')
    .backgroundColor('#4CAF50')
    .borderRadius(4)
    .margin({ bottom: 10 })

    // 溢出子 Column（有 margin）——实验组
    Column() {
      Text('margin=10，向右溢出了！')
        .fontSize(11).fontColor('#fff')
        .textAlign(TextAlign.Center)
        .width('100%')           // ★ 100% + margin-left: 10 = 溢出
        .lineHeight(30)
    }
    .width('100%')
    .backgroundColor('#F44336')
    .borderRadius(4)
    .margin({ left: 10 })       // ★ 陷阱：这 10vp 超出了父容器边界
  }
  .width('100%')
  .padding(10)
  .backgroundColor('#F5F5F5')
  .border({ width: 1, color: '#E0E0E0' })
  .borderRadius(8)
  // 无需设置 overflow，默认溢出可见
}

2.3 问题分析

为什么 margin 会导致溢出？

关键在于理解 ArkUI 的盒模型：

┌────── 父容器总宽度 ──────┐
│  ┌─ padding ─┐           │
│  │  ┌──────────────┐     │
│  │  │  子内容区      │     │  ← width('100%') = 父内容区宽度
│  │  │  (刚好填满)    │     │
│  │  └──────────────┘     │
│  │      ← margin:10 →    │  ← margin 在宽度之外额外占用
│  └──────────────────────┘

子组件先计算自己的 width('100%') = 父容器内容区宽度，然后再把 margin 加上去。因此子组件的总占用宽度 = width('100%') + margin-left + margin-right，这个总和超过了父容器的内容区宽度，造成了视觉溢出。

父容器为什么没有自动裁剪？

因为 ArkUI 中 Column 的 overflow 属性默认值为 Overflow.Visible——也就是说，子组件超出父容器边界时，不会自动裁剪，而是允许子组件「伸出去」。这与 CSS 的 overflow: visible 行为一致。

如果你希望父容器裁剪溢出的子组件，可以显式设置：

.overflow(Overflow.Clip)

2.4 如何避免 margin 溢出？

有以下几种策略：

策略 A：用 padding 替代 margin（推荐）

如果父容器是 Column，且你需要子组件之间有间隔，优先在父容器上用 space 参数，或者在子组件上用 margin({ top: ... })（纵向间隔）而非左右 margin。

Column({ space: 12 }) { ... }

策略 B：父容器添加内边距并裁剪

.overflow(Overflow.Clip)

但这样会导致溢出的部分被裁剪掉，可能不符合设计需求。

策略 C：不在 width(‘100%’) 的组件上加水平方向 margin

如果组件已经 width('100%') 了，再加左右 margin 几乎必然导致溢出。此时应该调整父容器的 padding 来实现缩进效果。

2.5 实战建议

在实际项目中，最常见的溢出场景是这样的：

// ❌ 错误的做法
Column() {
  Button('登录')
    .width('100%')      // 想撑满
    .margin({ left: 16, right: 16 })  // 又想留边距
}
// → 溢出：width('100%') + 32vp margin > 父容器宽度

// ✅ 正确的做法
Column() {
  Button('登录')
    .width('100%')
}
.padding({ left: 16, right: 16 })  // padding 加在父容器上

---

三、场景⑤：Row 中 width(‘100%’) vs layoutWeight(1)

3.1 实验目的

这是日常开发中最大、最常见的坑。在 Row 中，子组件设置了 width('100%')，但并没有像预期那样「填满」Row——为什么？

3.2 完整代码

// ──────────────────────────────────────
// 场景 ⑤：Row 中的弹性分配
// ──────────────────────────────────────
Row() {
  // 左列：width('100%')，layoutWeight(0)
  Column() {
    Column() {
      Text('width(100%)')
        .fontSize(11).fontColor('#fff')
        .textAlign(TextAlign.Center)
        .width('100%')
        .lineHeight(36)
    }
    .width('100%')
    .backgroundColor('#FF6B6B')
    .borderRadius(6)

    Text('用 width(\'100%\') 的子组件'
      + '在 Row 中看似填满了，'
      + '但 Row 会尽可能压缩子组件。')
      .fontSize(10).fontColor('#999')
      .lineHeight(16)
      .margin({ top: 4 })
  }
  .layoutWeight(0)          // 不参与弹性分配
  .alignItems(HorizontalAlign.Start)
  .margin({ right: 6 })

  // 右列：layoutWeight(1)
  Column() {
    Column() {
      Text('layoutWeight(1)')
        .fontSize(11).fontColor('#fff')
        .textAlign(TextAlign.Center)
        .width('100%')
        .lineHeight(36)
    }
    .width('100%')
    .backgroundColor('#4ECDC4')
    .borderRadius(6)

    Text('用 layoutWeight(1) 的子组件'
      + '会占据 Row 的剩余空间，'
      + '这才是真正的「弹性填充」。')
      .fontSize(10).fontColor('#999')
      .lineHeight(16)
      .margin({ top: 4 })
  }
  .layoutWeight(1)           // ★ 关键：参与弹性分配
  .alignItems(HorizontalAlign.Start)
}
.width('100%')
.padding(8)
.backgroundColor('#F0F0F0')
.borderRadius(8)

3.3 Row 的布局算法详解

要理解为什么 width('100%') 在 Row 中不好使，需要深入 Row 的布局算法。Row 的布局分为三个阶段：

阶段一：测量固有宽度
  Row 遍历每个子组件，测量每个子组件在不被约束宽度时的「理想宽度」。
  如果一个子组件设置了固定宽度(width(100))，那它的理想宽度就是 100vp。
  如果一个子组件没有设置宽度，那它的理想宽度就是其内容宽度。
  ★ 注意：width('100%') 在这个阶段——因为 Row 还没有决定自己有多大——无法确定
    「100%」的基数是多少，因此 Row 会暂时给这个子组件一个很小的宽度（通常是 0vp
    或它的最小内容宽度）作为占位。

阶段二：分配弹性空间
  Row 计算所有子组件的理想宽度之和，与 Row 自身可用宽度比较。
  - 如果有剩余空间，按照 layoutWeight 的比例分配给设置了 layoutWeight 的子组件。
  - 如果没有剩余空间，按照 layoutWeight 的比例从每个子组件上扣减。

阶段三：二次测量
  分配完弹性空间后，Row 给每个子组件一个最终的「可用宽度」约束。
  此时，子组件的 width('100%') 才真正生效——因为它现在有了一个确定的基数。

核心洞察：layoutWeight 决定了「蛋糕有多大」，而 width('100%') 决定了「我怎么吃饱这块蛋糕」。没有 layoutWeight，蛋糕本来就很小，即使吃饱了也还是很小。

3.4 对比表格

属性	分配阶段	效果
width('100%')	只在 Row 确定了每个子组件的可用宽度后生效	填满「分到的」宽度
layoutWeight(1)	在 Row 总宽度分配阶段生效	争取「更大的」宽度
两者同时使用	先用 layoutWeight 分到空间，再用 width(‘100%’) 填满	完美弹性填充

3.5 实战建议

在 Row 中，如果你想让一个子组件弹性填满剩余空间，必须同时使用 layoutWeight 和 width('100%')：

Row() {
  // 固定宽度区域
  Text('左侧固定内容')

  // 弹性填充区域（同时用两个属性）
  Column()
    .layoutWeight(1)    // 争取剩余空间
    .width('100%')      // 填满分到的空间
}
.width('100%')

---

四、场景⑥：不同 alignItems 对 width(‘100%’) 的影响

4.1 实验目的

Column 的 alignItems 控制子组件的水平对齐方式。但当子组件设置了 width('100%') 之后，alignItems 是否还起作用？

4.2 完整代码

// ──────────────────────────────────────
// 场景 ⑥：alignItems 的影响
// ──────────────────────────────────────
Row() {
  // 6a: alignItems = Start
  Column() {
    Text('align: Start')
      .fontSize(11).fontColor('#666')
      .textAlign(TextAlign.Center)
      .width('100%').margin({ bottom: 4 })

    Column() {
      Text('width(100%)')
        .fontSize(11).fontColor('#fff')
        .textAlign(TextAlign.Center)
        .width('100%').lineHeight(28)
    }
    .width('100%')
    .backgroundColor('#FF9800')
    .borderRadius(4)

    Column() {
      Text('无 width')
        .fontSize(10).fontColor('#666')
        .padding({ left: 4, right: 4 })
        .lineHeight(28)
    }
    .backgroundColor('#FFF3E0')
    .borderRadius(4)
    .margin({ top: 4 })
    // ★ 无 width → 宽度 = 内容宽度
  }
  .alignItems(HorizontalAlign.Start)
  .layoutWeight(1)
  .padding(6)
  .backgroundColor('#FAFAFA')
  .borderRadius(6)
  .margin({ right: 4 })

  // 6b: alignItems = Center
  Column() {
    Text('align: Center')
      .fontSize(11).fontColor('#666')
      .textAlign(TextAlign.Center)
      .width('100%').margin({ bottom: 4 })

    Column() {
      Text('width(100%)')
        .fontSize(11).fontColor('#fff')
        .textAlign(TextAlign.Center)
        .width('100%').lineHeight(28)
    }
    .width('100%')
    .backgroundColor('#FF9800')
    .borderRadius(4)

    Column() {
      Text('无 width')
        .fontSize(10).fontColor('#666')
        .padding({ left: 4, right: 4 })
        .lineHeight(28)
    }
    .backgroundColor('#FFF3E0')
    .borderRadius(4)
    .margin({ top: 4 })
  }
  .alignItems(HorizontalAlign.Center)
  .layoutWeight(1)
  .padding(6)
  .backgroundColor('#FAFAFA')
  .borderRadius(6)

  // 6c: alignItems = End
  Column() {
    Text('align: End')
      .fontSize(11).fontColor('#666')
      .textAlign(TextAlign.Center)
      .width('100%').margin({ bottom: 4 })

    Column() {
      Text('width(100%)')
        .fontSize(11).fontColor('#fff')
        .textAlign(TextAlign.Center)
        .width('100%').lineHeight(28)
    }
    .width('100%')
    .backgroundColor('#FF9800')
    .borderRadius(4)

    Column() {
      Text('无 width')
        .fontSize(10).fontColor('#666')
        .padding({ left: 4, right: 4 })
        .lineHeight(28)
    }
    .backgroundColor('#FFF3E0')
    .borderRadius(4)
    .margin({ top: 4 })
  }
  .alignItems(HorizontalAlign.End)
  .layoutWeight(1)
  .padding(6)
  .backgroundColor('#FAFAFA')
  .borderRadius(6)
  .margin({ left: 4 })
}
.width('100%')
.alignItems(VerticalAlign.Top)

4.3 运行结果分析

观察三个子 Column，你会发现两个明显的规律：

规律一：橙色条（有 width('100%)）在三列中的宽度完全一致。

无论外面是 Start、Center 还是 End，设了 width('100%') 的组件宽度都是相同的——都是其直接父 Column 的内容区宽度。alignItems 对它有「零影响」。

规律二：浅橙色条（无 width）在三列中的位置和宽度各不相同。

• alignItems(Start) 下：浅橙色条靠左，宽度 = 内容宽度
• alignItems(Center) 下：浅橙色条居中，宽度 = 内容宽度
• alignItems(End) 下：浅橙色条靠右，宽度 = 内容宽度

4.4 原理分析

alignItems 的本质是：「当子组件的宽度小于父容器时，决定子组件在水平方向上的位置」。

但如果子组件的宽度已经等于父容器的内容区宽度（通过 width('100%') 实现），那它就「无处可移」了——已经占满了全部空间，alignItems 也就失去了用武之地。

可以这样理解：width('100%') 是「绝对值定义」，而 alignItems 是「相对位置调整」。先有绝对值，才有相对位置。当绝对值为 100% 时，相对位置只有一种可能——占满。

4.5 与 Column 默认 alignItems 的关系

Column 的 alignItems 默认值是 HorizontalAlign.Center。如果不显式设置 alignItems，Column 的子组件默认居中对齐。

这意味着：

// 这个 Column 的默认 alignItems = Center
Column() {
  Text('Hello')
  // 不设 width → 宽度 = 内容宽度 → 居中显示
}

很多初学者发现 Text 不设宽度时「居中」了，其实是 alignItems(Center) 的效果。一旦给 Text 加上 .width('100%')，它就会立刻「撑满」——这可能会打破一些居中布局的设计。

---

五、第二篇总结

编号	场景	核心结论
④	margin 溢出陷阱	width('100%') 后加左右 margin → 总宽度超出父容器
⑤	Row 中弹性分配	width('100%') 不争取空间，layoutWeight 才争取；两者需配合使用
⑥	alignItems 的影响	设了 width('100%') → 宽度已满 → alignItems 不生效

一句话记住：width('100%') 只控制「我的内容区填满分到的宽度」，但不控制「我能分到多宽」（那是 layoutWeight 的事），也不控制「我之外的额外空间」（那是 margin 的事）。