【鸿蒙实战开发】HarmonyOS原生能力实现图文混排

场景描述

应用中基于原生能力实现图文混排效果有多个方案可实现，推荐使用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(ImageFit.Fill) 
      .verticalAlign(ImageSpanAlignment.BASELINE) 
      .onClick(() => { 
        console.log('测试输出') 
      }) 
    Span('\n') 
    Span('昨天 12:00') 
      .fontSize(12) 
      .fontColor('#ffcac8c8') 
  } 
  .margin({ 
    left: 10 
  }) 

  Text('+关注') 
    .fontSize('28px') 
    .fontColor('#ff8200') 
    .border({ 
      width: 1, 
      color: '#ff8200', 
      radius: 10, 
      style: BorderStyle.Solid 
    }) 
    .padding({ 
      left: 5, 
      right: 5, 
      top: 2, 
      bottom: 2 
    }) 
    .position({ x: 280, y: 2 }) 
}

复制

方案二：基于RelativeContainer相对布局实现图文混排效果

使用此方案RelativeContainer子组件要用alignRules布局组件位置，布局时需指定容器id。参与相对布局的容器内组件必须设置id，不设置id的组件组件不显示，容器id固定为__container__。

如以下核心代码中子组件都设置id，父容器未设置id时，父容器默认id固定为__container__。

核心代码

//