在HarmonyOS应用开发中，使用Row容器进行横向布局是一种常见做法。然而，当容器内空间不足以容纳所有子组件时，开发者可能会遇到一个令人困惑的问题：并非按照预期对文本进行省略，而是整个子组件直接“消失”了。本文将深入分析此问题的根源，并提供清晰可靠的解决方案。

问题现象

在Row组件中并排放置两个Text组件是一种典型的布局需求，例如：左侧是一个动态变化、长度不定的标题，右侧是一个固定的状态标识（如“(99)”）。

• 期望效果：当Row宽度不足时，左侧Text应自动收缩，在末尾显示省略号（TextOverflow.Ellipsis），右侧Text应始终保持完整显示。

• 实际效果：随着左侧标题变长，在空间不足时，左侧Text并未显示省略号，而是直接消失不见，只留下右侧Text。

问题代码示例：

@Entry
@Component
struct Index {
  @State title: string = '这是一个非常非常非常长的动态标题文本';

  build() {
    Column() {
      Row() {
        Text(this.title)
          .fontSize(17)
          .fontWeight(500)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 期望空间不足时显示省略号
          .onClick(() => { this.title += '再加长'; })

        Text('(99)')
          .fontSize(17)
          .fontWeight(500)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .displayPriority(2) // 试图设置低优先级，期望空间不足时自己先被隐藏
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .margin({ top: 280 })
    }
  }
}

效果预览：当Row宽度不足以同时显示“长标题”和“(99)”时，左侧的标题Text组件会完全消失，而非显示为“这是一个非常非常非常长的动态标题文... (99)”。

背景知识

要理解此问题，需要了解HarmonyOS ArkUI中两个关键的布局属性机制：

1. displayPriority属性机制：

   此属性用于设置组件的显示优先级，其值为数字，值越小，优先级越高。当父容器空间不足时，系统会尝试隐藏子组件，其规则是：从低优先级（值大）的组件开始隐藏。如果隐藏了某个优先级的组件，则所有优先级比它低的组件（值更大）也会被隐藏，无论它们自身是否有足够空间。

   在上面的代码中，右侧Text设置了displayPriority(2)，左侧Text未设置（默认为0，即最高优先级）。按照此规则，当空间不足时，系统会先尝试隐藏低优先级的右侧Text，但一旦决定隐藏优先级2的组件，即使左侧优先级0的组件空间足够，也会被连带隐藏。这就是左侧组件“消失”的直接原因之一。

2. 弹性布局（Flex）压缩规则：

   Row组件基于Flex布局实现。子组件在主轴方向上的尺寸是否可压缩，由flexShrink属性控制：

   • flexShrink: 0（默认值）：组件禁止压缩，尺寸固定。

   • flexShrink: 1：组件允许压缩。

     要实现Text的文本在空间不足时自动显示省略号（TextOverflow.Ellipsis），必须同时满足三个条件：

     a. 设置了maxLines（例如maxLines(1)）。

     b. 设置了textOverflow（例如textOverflow({overflow: TextOverflow.Ellipsis})）。

     c. 组件本身在主轴方向允许压缩（即flexShrink: 1）并且有明确的宽度约束。

     在问题代码中，左侧Text仅满足了前两个条件，但flexShrink默认为0，即不允许压缩，因此文本省略的机制根本不会被触发。

解决方案

问题的根本原因在于displayPriority的“组件级隐藏”机制与textOverflow的“文本级压缩”机制发生了冲突。当空间不足时，系统优先触发了基于优先级的组件隐藏逻辑，而不是我们希望触发的文本压缩与省略逻辑。

解决思路：摒弃会导致组件整体隐藏的displayPriority，改用纯弹性布局（Flex）的压缩与权重控制机制，明确指定各个子组件在空间争夺中的行为。

修正后的代码示例：

@Entry
@Component
struct FixedRowDemo {
  @State title: string = '这是一个非常非常非常长的动态标题文本';

  build() {
    Column() {
      // 方案：使用 Flex 替换 Row，并显式设置子组件的伸缩规则
      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
        Text(this.title)
          .fontSize(17)
          .fontWeight(500)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .flexShrink(1) // 关键修改1：允许该组件在空间不足时被压缩
          .onClick(() => { this.title += '再加长'; })

        Text('(99)')
          .fontSize(17)
          .fontWeight(500)
          .flexShrink(0) // 关键修改2：禁止该组件被压缩，保证其始终完整显示
      }
      .width('100%')
      .margin({ top: 280 })
    }
  }
}

修改说明：

1. 使用Flex替换Row：虽然Row是Flex的一种快捷方式，但此处使用Flex并明确设置direction: FlexDirection.Row可以使布局意图更清晰。

2. 移除displayPriority：不再使用组件优先级控制显示/隐藏。

3. 设置flexShrink：

   • 左侧动态标题Text：设置flexShrink(1)，允许它在空间不足时收缩自身宽度，从而触发textOverflow.Ellipsis的省略效果。

   • 右侧固定文本Text：设置flexShrink(0)，禁止其被压缩，保证“(99)”能始终完整显示。

4. 调整对齐方式：将justifyContent从FlexAlign.Center（居中）改为FlexAlign.Start（起始端对齐）。这符合“标题在前，状态在后”的常规阅读习惯，且能更直观地体现左侧压缩、右侧固定的效果。如果需要整体居中，可以将整个Flex容器放入一个父容器中并设置居中。

效果：应用此方案后，当空间不足时，左侧标题会从末尾开始被压缩并最终显示省略号，右侧的“(99)”则始终保持原样显示，完美实现了最初的布局意图。

总结：

在Row或Flex布局中处理子组件空间竞争时，应优先考虑使用flexShrink、flexGrow、layoutWeight等弹性布局属性来精细控制尺寸分配行为，避免使用displayPriority进行“非此即彼”的组件级隐藏。对于需要显示省略号的文本组件，务必确保其flexShrink属性设置为1，使其具备可压缩性，文本省略样式才能生效。