HarmonyOS 鸿蒙Next 图文混排用Text如何处理？如何动态的去添加Span以及ImageSpan？

HarmonyOS 鸿蒙Next 图文混排用Text如何处理？如何动态的去添加Span以及ImageSpan？

Text(item[‘commentModel’][‘commentText’])
  .fontSize(15)
  .fontColor($r(‘app.color.grey_fontColor’))
  .width(‘100%’)

比如我现在不能判断这个文本动态添加span啊 text并没有addSpan或者addImageSpan方法啊。

我不可能普通的回复都搞一个RichEditor 进行显示吧？ 然后把RichEditor的输入功能给禁止掉？


更多关于HarmonyOS 鸿蒙Next 图文混排用Text如何处理？如何动态的去添加Span以及ImageSpan？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

看demo，Text中支持Span和ImageSpan，里面用ForEach
cke_531.png

更多关于HarmonyOS 鸿蒙Next 图文混排用Text如何处理？如何动态的去添加Span以及ImageSpan？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


非常感谢 原来这样写啊。

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

图文混排的情况，开发这也会将图和文中间用特殊字符或者固定的分隔符分割开来的吧；
通过“分隔符+超链接”将字符串拆分成数组，在进行循环渲染，判断是用span还是imageSpan等渲染

判断不了 text里面不支持循环啊。

在HarmonyOS 鸿蒙Next中处理图文混排以及动态添加Span和ImageSpan，可以通过以下方式实现：

首先，使用Flex、RelativeContainer或Row等布局容器来组织文本和图片。对于Text组件，虽然它没有直接的addSpan或addImageSpan方法，但可以通过SpannableString或SpannableStringBuilder来包装文本，并通过setSpan方法将自定义Span应用到文本的特定部分。

对于动态添加Span，可以创建自定义Span类，继承适当的Span基类（如ReplacementSpan、MetricAffectingSpan等），并重写相关方法（如draw、measure等）以控制绘制逻辑和文本测量。然后，将自定义Span应用到需要的文本部分。

对于ImageSpan，可以直接使用它来显示行内图片。设置ImageSpan时，可以指定图片的资源、尺寸、对齐方式等属性。同时，ImageSpan还支持设置图片加载的占位图、加载成功和加载异常的回调等。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部