HarmonyOS 鸿蒙Next中Row中有Text和Image, 空间不足时，只压缩Text，并保证Image和Text挨着。【临时解决，求更好方案】

HarmonyOS 鸿蒙Next中Row中有Text和Image, 空间不足时，只压缩Text，并保证Image和Text挨着。【临时解决，求更好方案】 短文案

cke_202.png

长文案

cke_1978.png

需求如上图所示。

刚开始方案使用Row。Text组件加flexShrink(0)，不起作用，image会被挤出Row组件。 需配合layoutWeight使用，但是又达不到短文案那种效果。

经过反复尝试后，摸索出如下方案：

Flex({direction:FlexDirection.RowReverse, justifyContent:FlexAlign.End}) {
  Image()....
  Text()....
}

使用Flex反向排序，末尾对齐。

如果有简单的正常的方案，求指教。


更多关于HarmonyOS 鸿蒙Next中Row中有Text和Image, 空间不足时，只压缩Text，并保证Image和Text挨着。【临时解决，求更好方案】的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，Row内Image设置.flexShrink(0)固定尺寸，Text设置.flexShrink(1)允许压缩，并确保Image位于Text之后。更优方案：使用Stack布局，将Text与Image叠放，Text超出时裁剪。或自定义组件监听布局变化动态调整Text宽度。

更多关于HarmonyOS 鸿蒙Next中Row中有Text和Image, 空间不足时，只压缩Text，并保证Image和Text挨着。【临时解决，求更好方案】的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在 Row 组件中，只需给 Image 设置 flexShrink(0) 禁止压缩，给 Text 设置 flexShrink(1) 允许压缩，同时通过 .constraintSize({ minWidth: 0 }) 解除 Text 默认的最小宽度限制，并搭配 .textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1) 即可实现空间不足时只压缩文本、图片紧贴文本且不被挤出。之前 flexShrink(0) 不生效通常是因为 Text 未解除自身最小尺寸约束。

Row() {
  Image($r('app.media.icon'))
    .width(24).height(24)
    .flexShrink(0)
  Text('长文案内容……')
    .flexShrink(1)
    .constraintSize({ minWidth: 0 })
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .maxLines(1)
}

你用的 Flex 反向方案虽能临时满足，但语义不够直观，上述 Row 写法是更规范的解决方式。

回到顶部