HarmonyOS 6商城开发学习：弹窗内文本重叠的根治——别用固定lineHeight，用断点驱动动态行高

做商城/比价App的弹窗（欢迎弹窗、优惠券规则说明、会员协议浮层）时，你会遇到一个很诡精的bug：

设计稿上文字看着挺好，一到真机——特别是大字体模式 / 折叠屏展开 / 自由窗口拖窄拖宽——弹窗里那段多行说明文字开始上下咬合、甚至逐行叠在一起，像被压扁的 accordion。

华为官方购物比价实践把这个问题点名叫"弹窗页面文本重叠"，根因一句话就能钉死：

Text 设置了固定的 lineHeight（绝对值 px/vp），但窗口尺寸与字体缩放一变，字形实际需要的最小行高超过了你给的硬性 lineHeight → 排版引擎没空间可排，就只能叠。

一、先还原：它长什么样、怎么"看起来没写错"

典型弹窗里的说明文本：

// ❌ 问题写法：绝对值 lineHeight + 弹窗容器高度有限
Text('· 优惠券仅限本人使用，不可转赠、兑现\n· 过期不退，使用后自动失效\n· 详见《会员权益说明》')
  .fontSize(13)
  .lineHeight(20)          // ← 20vp 写死了
  .width('100%')
  .maxLines(6)
  .textOverflow({ overflow: TextOverflow.ELLIPSIS })

设计稿上：fontSize=13, lineHeight=20很舒服。但跑起来后出现重叠的条件其实很具体：

当 字形实际所需高度 > lineHeight=20vp​ 时，ArkUI 的表现不是"自动放宽行高"（你锁死了它），而是上下行字形按你的lineHeight紧凑排布——于是视觉上就咬合/重叠了。

二、根因拆解：lineHeight绝对值为什么是"静态锚点"

Text.lineHeight()在 ArkUI 里的语义是：

• 传数字（如 .lineHeight(20)）→ 20vp 的绝对行盒高度

• 传字符串数字（如 .lineHeight('1.4')/ 无单位语义）→ 按当前 font-size 的倍数

这和 Web/CSS 的 line-height: 20pxvs line-height: 1.4是同一类坑：

所以官方给的结论非常精准：

应用没有针对窗口尺寸设置断点，且 Text 设置了固定 lineHeight → 窗口/字体一变 → 超了 → 重叠。

"没有设断点"是另一个维度的问题，但固定 lineHeight 才是直接凶器。

三、解法一（第一优先级）：把 lineHeight 改成"倍数"，别写死绝对值

大多数商城弹窗的说明文本，不需要也不应该用绝对值 lineHeight。你真正要的是：

"两行之间有个节奏，大约 1.4～1.6 倍字号，随字号走。"

✅ 正确写法

Text(this.terms)
  .fontSize(13)
  .lineHeight(1.5)          // ← 无单位：13×1.5≈19.5vp，自动跟着走
  .width('100%')

就这一个改动，弹窗在多设备/大字模式下就不会再"叠字"。

什么时候才应该用绝对值 lineHeight？

只有在一种情况下你需要绝对值：

• 严格对齐设计稿的 8vp 网格（如标题区高度固定 44vp，里面 icon + 文字要严格垂直居中，你用 height(44)+ alignItems(Center)，这时为了"锁文字占高"才用 .lineHeight(22)之类的绝对值）

但即使这里，也更推荐用组合控制：

Row()
  .height(44)
  .alignItems(VerticalAlign.Center)
{
  Text(title)
    .fontSize(17)
    // 不设 lineHeight，或设 lineHeight(1.2)
    // 让 Row 的 44 容器 + Center 负责垂直定位
}

文字重叠的罪魁永远是：父容器给的可用高度 < lineHeight 的绝对锚定值带来的排布需求，却被 overflow 裁掉/压缩。

四、解法二：弹窗宽度本身要响应式——这就是"断点"出场的地方

官方说"应用没有针对窗口尺寸设置断点"——意思是：弹窗不是孤立的，它的可用宽度在不同设备/窗口形态下会变（手机全屏、分屏、自由窗口、折叠屏展开一半）。你用固定 vp 写死弹窗宽度/内容区宽度，内容排布就可能在极端尺寸下挤成一行半、触发换行异常，再叠加固定 lineHeight，就叠了。

4.1 先拿窗口宽度（vp）

import display from '@ohos.display'

function getWindowW(): number {
  return display.getDefaultDisplaySync().width
}

4.2 定义一个极小断点工具（不依赖复杂状态管理也能用）

// utils/breakpoint.ets
export type Breakpoint = 'sm' | 'md' | 'lg'

export function getBP(w?: number): Breakpoint {
  const wp = w ?? display.getDefaultDisplaySync().width
  if (wp >= 840) return 'lg'
  if (wp >= 600) return 'md'
  return 'sm'
}

// 弹窗内容最大宽度映射
export function dialogMaxW(bp: Breakpoint): number {
  return bp === 'lg' ? 520 : bp === 'md' ? 420 : 320
}

4.3 弹窗用 % 宽度而非死值，再配合 bp 做微调

@CustomDialog({
  alignment: DialogAlignment.Center,
  customStyle: true          // 自己控制外壳
})
struct CouponTermsDialog {
  @State bp: Breakpoint = getBP()

  build() {
    Column() {
      // 标题栏
      Row() { Text('优惠券使用说明').fontSize(16).fontWeight(700) }
        .width('100%').padding(16)

      // 说明文字 —— 关键：lineHeight 用倍数
      Text('· 仅限本人使用…\n· 过期不退…')
        .fontSize(13)
        .lineHeight(1.5)     // ✅ 不写死
        .width('100%')
        .padding({ left: 16, right: 16 })

      // 底部按钮
      Button('我知道了')
        .width('100%')
        .margin(16)
    }
    // 弹窗宽度：80%屏幕，但不超过断点上限
    .width(Math.min(display.getDefaultDisplaySync().width * 0.85, dialogMaxW(this.bp)))
    .backgroundColor('#FFF')
    .borderRadius(16)
    .clip(true)
  }
}

这里的核心收益是：弹窗宽度不写死 320vp，而是 min(85%屏幕, 按bp上限)​ → 内容区呼吸空间随窗口走 → 多行文本换行不会在极端窄窗口被逼到"字挤字"。

五、解法三：如果设计强制"对齐网格"要绝对值——用断点映射，别写死

少数情况设计稿就是要求"行高 22vp / 24vp"，那你至少做到：

不同断点给不同的绝对值，而不是全场一个 20vp 打死。

function responsiveLineH(bp: Breakpoint, baseFontSize: number): number {
  // 绝对值路线：按断点阶梯调
  if (bp === 'lg') return Math.round(baseFontSize * 1.6)
  if (bp === 'md') return Math.round(baseFontSize * 1.5)
  return Math.round(baseFontSize * 1.45)   // sm
}

但老实说——对普通说明文本，这不如 .lineHeight(1.5)省心。绝对值路线只建议用在"标题行等高容器对齐"这种排版钉子上。

六、排查清单：你弹窗文字是不是"叠了"但不一定是 lineHeight

七、一句话总结

弹窗里文本重叠不是"ArkUI bug"，而是三个选择撞一起：

1. lineHeight写成绝对值（不是倍数的"死锚"）

2. 弹窗宽度/容器高度没随窗口响应（没断点或没用 %）

3. 系统字体缩放/特殊字形把实际 glyph 顶超了你锚定的行盒

修法也三句话：

• 多行说明文字：永远 .lineHeight(1.4~1.6)，别写 .lineHeight(20)

• 弹窗宽度：用 %屏宽 + bp上限，别写死 320vp

• 对齐型单行标题：交给定高容器+Center，别用 lineHeight 硬撑垂直节奏

做到这三条，你的欢迎弹窗/规则说明/会员协议浮层，在手机、折叠屏、分屏、自由窗口和大字体模式下就都不会再出现"字叠字"的灾难现场。