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

于 2024-08-05 15:58:45 发布
阅读量456 收藏 16
点赞数 18
分类专栏： 前端 鸿蒙 安卓 文章标签： harmonyos 华为 android 鸿蒙 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS007/article/details/140929337
版权
前端 同时被 3 个专栏收录
208 篇文章 0 订阅
订阅专栏
鸿蒙
208 篇文章 2 订阅
订阅专栏
安卓
208 篇文章 0 订阅
订阅专栏

场景描述

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

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

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

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

核心代码
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__。

image.png

核心代码
// 相对布局 
RelativeContainer() { 
  Image($r('app.media.heard')) 
    .width(30) 
    .borderRadius(15) 
    .id('Image') 
      // 以容器作为锚点布局 
    .alignRules({ 
      top: { anchor: '__container__', align: VerticalAlign.Top }, 
      left: { anchor: '__container__', align: HorizontalAlign.Start } 
    }) 
  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') 
  } 
  .id('Text1') 
  // 以容器内子组件作为锚点进行布局 
  .alignRules({ 
    top: { anchor: 'Image', align: VerticalAlign.Top }, 
    left: { anchor: 'Image', align: HorizontalAlign.End } 
  }) 
  .margin({ 
    left: 10 
  }) 

  Text('+关注') 
    .fontSize('28px') 
    .fontColor('#ff8200') 
    .border({ 
      width: 1, 
      color: '#ff8200', 
      radius: 10, 
      style: BorderStyle.Solid 
    }) 
    .id('Text2') 
      // 以容器内子组件作为锚点进行布局 
    .alignRules({ 
      top: { anchor: 'Text1', align: VerticalAlign.Top }, 
      left: { anchor: 'Text1', align: HorizontalAlign.End }, 
    }) 
    .margin({ 
      left: 150 
    }) 
    .padding({ 
      left: 5, 
      right: 5, 
      top: 2, 
      bottom: 2 
    }) 
}
方案三：基于线性布局实现图文混排效果

基于线性布局实现图文混排时，节点数量会比较多。

image.png

核心代码
Row() { 
  Image($r('app.media.img1')) 
    .width(30) 
    .borderRadius(15) 

  Column() { 
    Row() { 
      Text('文本') 
        .fontSize(15) 
      Image($r('app.media.vvip_1')) 
        .width(30) 
        .borderRadius(15) 
        .margin({ left: 10 }) 
        .position({ x: 40, y: 2 }) 
    } 

    Text('昨天 12:00') 
      .fontSize(12) 
      .fontColor('#ffcac8c8') 
  } 
  .margin({ left: 10, top: 2 }) 
  // 设置Column容器内子组件水平方向上布局 
  .justifyContent(FlexAlign.Start) 
  // 设置Column容器内子组件垂直方向上布局 
  .alignItems(HorizontalAlign.Start) 

  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 }) 
} 
.width('100%') 
.margin({ left: 10, top: 50 })
方案四：基于StyledString（属性字符串）实现图文混排效果

使用StyledString实现图文混排效果，首先得让Text组件与StyledString绑定，绑定后即可使用StyledString设置文本样式以及对文本进行增、删、改、查等操作。

StyledString是一个方便灵活应用文本样式的对象，Text组件可通过TextController中的setStyleString方法与属性字符串绑定。绑定之后即可通过StyledString对文本进行增、删、改、查等一系列操作，并且可以用StyledString设置文本样式。

注意：

  1. 组件样式和属性字符串样式冲突时，属性字符串优先级高，冲突样式以属性字符串设置样式为准。

  2. Text子组件样式与属性字符串样式冲突，以属性字符串为准。

  3. 属性字符串对象不支持@State修饰。

image.png

核心代码
import { image } from '@kit.ImageKit' 
import { LengthMetrics, LengthMetricsUnit } from '@ohos.arkui.node'; 

@Component 
export struct FourTh { 
  // PixelMap图片 
  imagePixelMap: image.PixelMap | undefined = undefined; 
  // 属性字符串对象 
  mutableStr: MutableStyledString = new MutableStyledString(''); 
  controller: TextController = new TextController(); 
  // 基于属性字符串设置文本样式 
  fontStyle2: StyledStringValue = new TextStyle({ 
    fontColor: '#ffcac8c8', 
    fontSize: LengthMetrics.vp(12) 
  }) 

  async aboutToAppear() { 
    // 获取图片资源并同步解析成PixelMap 
    this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.member')); 
  } 

  // 同步将资源解析成PixelMap 
  private async getPixmapFromMedia(resource: Resource) { 
    let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ 
      bundleName: resource.bundleName, 
      moduleName: resource.moduleName, 
      id: resource.id 
    }) 
    let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)); 
    let createPixelMap: image.PixelMap = await imageSource.createPixelMap({ 
      desiredPixelFormat: image.PixelMapFormat.RGBA_8888 
    }); 
    await imageSource.release(); 
    return createPixelMap; 
  } 

  build() { 
    NavDestination() { 
      Row() { 
        Image($r('app.media.heard')) 
          .width(30) 
          .borderRadius(15) 
          .margin({ 
            right: 10, 
            top: 5 
          }) 
        // Text组件绑定controller 
        Text(undefined, { controller: this.controller }) 
          .fontSize(15) 
        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 }) 
      } 
      .onAppear(() => { 
        setTimeout(() => { 
          if (this.imagePixelMap !== undefined) { 
            // ImageAttachment: New图形对象并设置样式 
            this.mutableStr = new MutableStyledString(new ImageAttachment({ 
              value: this.imagePixelMap, 
              size: { width: '40px', height: '40px' }, 
              // layoutStyle: { borderRadius: LengthMetrics.vp(10) }, 
              verticalAlign: ImageSpanAlignment.BASELINE, 
              objectFit: ImageFit.Fill 
            })) 
          } 
          // insertString：在指定字符之前插入文本，此处即在图片之前添加文本 
          this.mutableStr.insertString(0, '文本'); 
          // 在图片之后添加文本 
          let str = new StyledString('\n昨天  12:00', [{ 
            start: 0, 
            length: 10, 
            styledKey: StyledStringKey.FONT, 
            styledValue: this.fontStyle2 
          }]) 
          // appendStyledString: 在末尾位置追加新的属性字符串 
          this.mutableStr.appendStyledString(str); 
          // 通过TextController中的setStyledString方法让属性字符串与Text组件绑定 
          this.controller.setStyledString(this.mutableStr); 
        }, 100) 
      }) 
      .height(200) 
      .margin({ left: 10, top: 50 }) 
      .width('100%') 
      .alignItems(VerticalAlign.Top) 
    }.title('方案4') 
  } 
}

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
●更多鸿蒙最新技术知识点，请移步前往小编：https://gitee.com/

在这里插入图片描述

代码改变世界996
关注
  • 18
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS（鸿蒙）
m0_69082654的博客
04-08 546
代码演示： <Text ohos:id=“$+id:text” ohos:height=“match_content” ohos:width=“match_content” ohos:text=“李子捌” ohos:text_size=“100px” ohos:text_color=“#000000” ohos:text_font=“HwChinese-medium” /> 演示效果： [](()2.5 italic | 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 | | —
【HarmonyOS NEXT】是否支持富文本，如何在一段富文本中嵌入图片
Mayism123的博客
03-11 618
App自定义了一套表情组件，期望能将特定的范式（比如 [大笑]）转化成对应的表情图片，并与其他输入的文字混排。针对TextInput组件，可以监听并识别输入的内容，然后把其中的特定内容转换成特定图片么？比如iOS中有AttributeText，并且有YYText的进一步封装可以实现。可以使用RichEditor组件，该组件是支持图文混排和文本交互式编辑的组件。自动转换成：开心开心(一个大笑的自定义图片，非emoji)说明：文档底部提供了相关示例供您参考。比如输入：开心开心[大笑]
HarmonyOS应用开发：RichEditor（基础组件）
situnanQAQ的博客
06-11 997
支持图文混排和文本交互式编辑的组件。
【鸿蒙ArkUI实战开发】基于RichEditor的评论编辑
HarmonyOSMN的博客
07-08 863
使用RichEditor的属性customKeyboard控制切换系统键盘还是自定义键盘，添加表情使用addImageSpan，删除内容使用deleteSpans，并通过获取光标所在位置进行删除。
【愚公系列】2023年12月 HarmonyOS教学课程 019-ArkUI组件（TextInput/TextArea）
热门推荐
时光隧道
12-07 5万+
/ xxx.ets@Entry@Componentbuild() {Column() {TextInput({placeholder:'我是提示文本'})TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
鸿蒙（HarmonyOS）编程思想（Java版）
06-06
本课程详细讲解了鸿蒙（HarmonyOS）API的核心用法，并提供了大量的实战案例。
基于原生能力实现图文混排
最新发布
hongxiaomeng的博客
07-23 375
仿微信，使用鸿蒙ArkUI + ArkTS（API9）开发实现_arkui 微信对话
2401_84170623的博客
04-15 877
​ 这里又要吐槽下，bindContextMenu 的强制边框，还有鸿蒙现在对输入法开/关以及监听支持很差，虽然提供有接口，但貌似都无效。数据来源：本地写死 > 本地数据库 > 在线假数据（不存在的Doge）不仅仅是界面展示，将相关可执行交互实现。4.鸿蒙开发系统底层方向。1.项目开发必备面试题。5.鸿蒙音视频开发方向。UI 相关的都玩一遍。6.鸿蒙车载开发方向。7.鸿蒙南向开发方向。
鸿蒙ArtUI组件的优势及使用
weixin_48091641的博客
04-24 1194
鸿蒙战略胜利，目前鸿蒙开发是一个急需要人才的缺口，在未来几年势必会有大量的鸿蒙岗位出现，目前所存在的鸿蒙岗位也是给出了相当高的薪资。事实证明，鸿蒙开发确实是一块香饽饽。作为华为自家的操作系统，正在逐步扩张市场份额。想要转行或者入行的朋友可以下手了。在这里，为大家提供一份我整理的鸿蒙开发学习资料，涵盖了UI开发、web、应用模型多个知识点，有需要的朋友可以扫描下方二维码，免费获取更多相关资料。
如何使用命令行对RK开发板进行OpenHarmony版本烧录？
m0_64420071的博客
03-29 1451
开发版烧录
Android 原生实现图文混排编辑器
06-12
在Android开发中，创建一个能够实现图文混排编辑器是一项挑战性的任务，因为这涉及到复杂的布局管理和图片处理。本文将详细解析如何使用Android原生控件来构建这样一个功能丰富的编辑器，支持网络图片和本地图片的...
实现带网络图片的html图文混排.docx
05-18
因此，我们需要使用特殊的方法来实现图文混排。 二、ImageGetter的作用 ImageGetter是一个接口，它提供了获取Drawable对象的方法。在本文中，我们将使用ImageGetter来加载网络图片。通过重写getDrawable方法，我们...
egret_基于TextFlow属性实现图文混排.rar
12-05
在本文中，我们将深入探讨如何在Egret游戏引擎中利用TextFlow属性实现图文混排。Egret是一个流行的开源JavaScript框架，专为2D游戏开发设计，它提供了丰富的图形渲染和交互功能。然而，Egret的默认TextField组件（即...
unity实现图文混排功能.zip
04-17
在Unity游戏开发中，图文混排（Text with Image Mixing）是一项重要的功能，它允许开发者在文本中嵌入图片，如表情符号，以增加交互性和视觉吸引力。本项目"unity实现图文混排功能.zip"提供了TextInlineSprite-...
iOS利用NSAttributedString实现图文混排效果示例
08-29
在iOS开发中，为了实现丰富的文本显示，如图文混排，开发者经常需要用到NSAttributedString。自iOS 7以来，由于引入了TextKit框架，这个任务变得更加简单高效。本文将深入讲解如何利用NSAttributedString结合...
基于RichEditor的评论编辑
hongxiaomeng的博客
06-04 329
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：RichEditor）
m0_64420071的博客
03-12 1300
ArkTS声明式开发（基础手势：RichEditor）
HarmonyOS NEXT多层级轮播图方案
shudaoshanQAQ的博客
03-21 777
该场景多用于购物、资讯类应用。
richText怎么实现图文混排
07-27
在Cocos2d-x中，你可以使用富文本（Rich Text）实现图文混排效果。富文本允许你在一个文本框内同时显示文字和图片。 下面是一个示例代码，演示如何在Rich Text中实现图文混排： ```cpp // 创建一个RichText对象 auto richText = RichText::create(); // 创建一个Text组件，用于显示文字 auto text = Text::create("这是一段文字", "Arial", 24); richText->pushBackElement(text); // 创建一个Image组件，用于显示图片 auto sprite = Sprite::create("image.png"); auto image = ImageView::create(); image->initWithSpriteFrame(sprite->getSpriteFrame()); image->setContentSize(Size(50, 50)); richText->pushBackElement(image); // 将RichText添加到场景中 this->addChild(richText); ``` 在上面的代码中，我们创建了一个RichText对象，并向其中添加了一个Text组件用于显示文字，以及一个Image组件用于显示图片。通过调用`pushBackElement`方法将这些组件添加到RichText中。 你可以根据自己的需求设置文字的内容、字体、字号等，以及图片的路径、大小等。 希望这个示例能帮助到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值