子组件的压缩优先级
=========

#### 问题现象

Row内有多个Text文本，需要压缩其中一个。如下代码，Row是自适应的，里面有多个文本，第二个文本不能压缩要全部显示，在第二个文本展示不下的时候，压缩第一个文本，让其换行，如何实现？

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row(){
        Image($r('app.media.startIcon'))
          .width(40).height(40)

        Text('text1')
          .maxLines(2)

        Text('text2')
      }
      .layoutWeight(1)
    }
    .height('100%')
    .width('100%');
  }
}

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9a/v3/2YyrrnXLSjm8tNH-eNvWbA/zh-cn_image_0000002658961871.png?HW-CC-KV=V1&HW-CC-Date=20260709T133947Z&HW-CC-Expire=86400&HW-CC-Sign=A57380FDF952E3B7CCD86EC73673A3BC57204587999CDBBCE4715CE6509D780C "点击放大")

#### 背景知识

*   线性布局是开发中最常用的布局，通过线性容器[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)和[Column](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column)构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Row容器内子元素按照水平方向排列。
*   [flexShrink](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-flex-layout#flexshrink)设置父容器压缩尺寸分配给此属性所在组件的比例。当父容器为Column、Row时，需设置主轴方向的尺寸。
*   [layoutWeight](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-size#layoutweight)设置组件的布局权重，使组件在父容器（Row/Column/[Flex](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex)）的主轴方向按照权重分配尺寸。
*   [Text](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text)显示一段文本的组件。

#### 解决方案

实现原理说明：

1.  布局权重分配：通过.layoutWeight(1)让第一个Text组件占据Row剩余空间，当空间不足时优先触发该组件的压缩换行。
2.  压缩控制：
    *   第一个Text设置.flexShrink(1)（默认值可省略），允许内容压缩换行。
    *   第二个Text设置.flexShrink(0)，禁止压缩行为。
3.  容器约束：建议给Row设置具体宽度（如.width('100%')），确保布局系统能正确计算可用空间。

参考以下示例控制Row内子组件的压缩优先级：

@Entry
@Component
struct FlexShrink {
  build() {
    Column() {
      Row() {
        Image($r('app.media.startIcon'))
          .width(40).height(40);

        Text('text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1')
          .maxLines(2)
          .flexShrink(1) _// 允许压缩换行_
          .layoutWeight(1); _// 设置权重分配剩余空间_

        Text('text2')
          .flexShrink(0); _// 禁止压缩_
      }
      .padding({ left: 16, right: 16 })
      .width('100%'); _// 确保Row宽度受约束_
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%');
  }
}

#### 常见FAQ

Q：如何确定flexShrink的值。

A：flexShrink的计算逻辑就是将不足的空间除以带有flexShrink的组件占用的空间，然后再进行对应的缩放。压缩的权重为flexShrink\*带有flexShrink的组件所设置的长度。以计算不同Text实际宽度为例：

Flex() {
  Text('X').flexShrink(1).width(180) _// 运行得到实际宽度：【150】180-30=150_
  Text('Y').flexShrink(3).width(60) _// 运行得到实际宽度：【30】60-30=30_
  Text('Z').flexShrink(4).width(60) _// 运行得到实际宽度：【20】60-40=20_
}.width(200)

子组件原始总宽度300，压缩后实际总宽度200，需要压缩100，X压缩权重为1\*180=180，Y压缩权重为3\*60=180，Z压缩权重为4\*60=240，总压缩权重为180+180+240=600，因此X,Y,Z压缩长度分别为180/600\*100=30，180/600\*100=30，240/600\*100=40，压缩后实际宽度分别为150，30，20。