一、displayPriority的“隐藏陷阱”与根因分析

在HarmonyOS 6的ArkUI开发中，Row容器内实现"左侧标题自适应省略，右侧标签完整显示"是高频需求（如消息列表的"标题+未读角标"）。开发者常误用displayPriority导致左侧文本直接消失，而非显示省略号。本文将彻底解析布局优先级冲突的根因，并提供Flex弹性压缩 与Grid网格布局两套终极解决方案。

一、displayPriority的"隐藏陷阱"与根因分析

1. 问题现场：左侧文本为何"消失"而非"省略"？

场景复现 ：在聊天列表或通知栏中，左侧标题长度动态变化，右侧需固定显示未读数量（如(99)）。

预期效果	实际效果	问题代码（典型错误）
`长标题... (99)`	`(99)`（左侧直接消失）	使用`displayPriority`控制显隐

错误代码示例：

复制代码

Row() {
  Text(this.dynamicTitle)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .maxLines(1)
    .displayPriority(1) // ❌ 错误：试图用优先级控制压缩

  Text(`(${this.count})`)
    .displayPriority(2) // ❌ 错误：优先级更高
}
.width('100%')

运行结果 ：当空间不足时，左侧Text直接被隐藏，而非显示省略号。

2. 根因揭秘：优先级机制与压缩机制的互斥

核心矛盾 ：displayPriority的组件级隐藏机制 与textOverflow的文本级压缩机制互斥。

机制	触发条件	效果
`displayPriority`	空间不足时	全有或全无：隐藏优先级低的整个组件
`textOverflow`	文本宽度超限时	内容裁剪：保留组件，文字显示省略号

冲突过程：

Row宽度不足时，系统先检查displayPriority。
左侧优先级低（1 < 2），系统直接移除整个左侧Text组件。
textOverflow根本没有机会执行，因为组件已经被销毁。

结论：displayPriority不能与textOverflow混用。它适用于"空间不足时完全移除某个控件"（如工具栏按钮），而非"动态压缩文本"。

二、终极解决方案：Flex弹性压缩布局

1. 核心方案：弃用displayPriority，启用layoutWeight

核心思路 ：利用Flex的弹性分配机制，给左侧标题设置可压缩空间 ，右侧标签设置固定空间。

复制代码

Row() {
  // 左侧标题：自适应，优先被压缩
  Text(this.dynamicTitle)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .maxLines(1)
    .layoutWeight(1) // ✅ 关键：占据剩余空间，空间不足时触发压缩

  // 右侧标签：固定内容，不压缩
  Text(`(${this.count})`)
    .flexShrink(0) // ✅ 关键：禁止收缩，确保完整显示
}
.width('100%')

2. 布局原理拆解

属性	作用	替代displayPriority的方案
左侧`.layoutWeight(1)`	占据`Row`剩余的全部空间	左侧成为弹性容器，空间不足时内容被压缩
右侧`.flexShrink(0)`	禁止组件本身被压缩	替代`displayPriority(2)`，确保右侧始终完整
左侧`.textOverflow`	在弹性空间内触发文本裁剪	空间不足时显示省略号，而非组件移除

效果：长标题文本... (99)

3. 边界情况处理：右侧宽度不确定时

若右侧标签内容动态变化（如从(9)变为(99+)），需设置最小宽度防止挤压左侧。

复制代码

Text(this.getCountText()) // 可能是 "(9)" 或 "(99+)"
  .flexShrink(0)
  .minWidth(40) // ✅ 预留足够空间，避免右侧被挤压变形

三、进阶方案：Grid网格布局（HarmonyOS 6新增）

1. 适用场景：复杂对齐需求

如果右侧标签需要严格右对齐（如[标题]...[99]），Grid布局是更精准的选择。

复制代码

Grid({ columns: { '1fr', 'auto' } }) { // ✅ 第一列自适应，第二列根据内容撑开
  Text(this.dynamicTitle)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .maxLines(1)

  Text(`(${this.count})`)
}
.width('100%')

2. 方案对比

方案	优点	缺点	适用场景
Flex + layoutWeight	代码简洁，兼容性好	右侧需手动设置`flexShrink`	大多数列表项
Grid布局	布局精准，无需计算权重	需要HarmonyOS 6+支持	需要严格对齐的复杂布局

四、避坑指南：布局属性禁忌表

需求	正确做法	错误做法
左侧自适应省略	`layoutWeight(1)`+ `textOverflow`	`displayPriority`
右侧固定完整	`flexShrink(0)`+ 显式宽度	`displayPriority`
空间不足时隐藏控件	`displayPriority`（单独使用）	配合`textOverflow`使用

五、总结：布局选择的"黄金法则"

永远弃用displayPriority做压缩：它只适合"移除"，不适合"压缩"。
首选Flex弹性布局 ：layoutWeight(1)+ flexShrink(0)是解决自适应宽度的通用解法。
Grid用于精准对齐 ：当Flex布局无法满足对齐精度时，升级到Grid布局。

通过理解displayPriority的"全有或全无"机制，你的HarmonyOS 6应用将彻底告别"文本消失"的布局Bug，实现真正的弹性自适应。