【HarmonyOS NEXT应用开发】案例117：基于原生能力实现图文混排

场景描述

应用中基于原生能力实现图文混排效果有多个方案可实现，推荐使用Flex作父容器实现的方案（方案一），此方案优点在于节点数量少，结构简单。

方案一：基于Flex作父容器实现图文混排

建议基于Flex容器作为父容器实现图文混排，优点在于减少节点数量。

内部头像使用Image组件，中间部分使用Text文本组件，右边使用Text文本组件。

核心代码

Flex({ direction: FlexDirection.Row }) {
  Image($r('app.media.heard'))
    .width(30)
    .borderRadius(15)
  Text() {
    Span('文本')
      .fontSize(15)
    ImageSpan($r('app.media.member'))
      .width('40px')
      .height('40px')
      .objectFit