HarmonyOS鸿蒙Next中Row里面有多个Text,如何压缩其中一个

HarmonyOS鸿蒙Next中Row里面有多个Text,如何压缩其中一个

Row() {
  Image('image')
    .width(40).height(40)
  Text('text1')
    .maxLines(2)
  
  Text('text2')
}
.layoutWeight(1)

如上代码

Row是自适应的，里面有多个文本，

第二个文本不能压缩要全部显示。

展示不下的时候，压缩第一个文本，让其换行。

5 回复

第二个文本如果超过了一定长度，展示就错位了，第二个文本最好也限制最大宽度，或者最多的字数

@Entry
@Component
struct TestPage {
  build() {
    Row {
      Text('---').fontColor('#f50')
      Row {
        Image($r('app.media.publish_gupiao_icon'))
          .width(40).height(40)
        Text('text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1text1')
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .layoutWeight(1)

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

更多关于HarmonyOS鸿蒙Next中Row里面有多个Text,如何压缩其中一个的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


text1很短的时候，两个test不能靠在一起。text1会一直占据很宽的位置，

好奇葩的需求啊，你怎么确保第二个文本可以全部显示啊

在HarmonyOS鸿蒙Next中，若要在Row中压缩其中一个Text，可以使用Flex布局的flexShrink属性。将需要压缩的Text组件包裹在Flex组件中，并设置flexShrink为1，其他Text组件保持默认。这样，当空间不足时，该Text会自动压缩，而其他组件保持不变。

在HarmonyOS Next中，可以通过flex布局的flexShrink属性来控制文本压缩行为。针对你的需求，可以这样修改代码：

Row(){
  Image('image')
    .width(40).height(40)
  Text('text1')
    .maxLines(2)
    .flexShrink(1)  // 允许压缩
    .layoutWeight(1) // 设置权重
  
  Text('text2')
    .flexShrink(0)  // 禁止压缩
}
.layoutWeight(1)

关键点说明：

  1. 为需要压缩的Text1设置flexShrink(1)允许压缩
  2. 为Text2设置flexShrink(0)禁止压缩
  3. 通过layoutWeight分配剩余空间

这样当空间不足时，Text1会自动换行压缩显示，而Text2会保持完整显示。

回到顶部