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

于 2024-09-06 18:13:39 发布
阅读量248 收藏 4
点赞数 7
分类专栏： 鸿蒙开发学习笔录 文章标签： harmonyos 华为 鸿蒙开发 鸿蒙 openharmony 鸿蒙系统 UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76813281/article/details/141966459
版权

场景描述

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

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

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

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

1

核心代码

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__。

2

核心代码

// 相对布局
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
    })
}

方案三：基于线性布局实现图文混排效果

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

3

核心代码

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修饰。

4

核心代码

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')
  }
}

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：
1

除此之外，根据这个学习鸿蒙全栈学习路线，也附带一整套完整的学习【文档+视频】，内容包含如下：

内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战）等技术知识点。帮助大家在学习鸿蒙路上快速成长！

鸿蒙【北向应用开发+南向系统层开发】文档

鸿蒙【基础+实战项目】视频

鸿蒙面经

2

为了避免大家在学习过程中产生更多的时间成本，对比我把以上内容全部放在了↓↓↓想要的可以自拿喔！谢谢大家观看！
3

爱桥代码的程序媛
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
unity实战之TextMeshPro实现聊天图文混排
爱上游戏开发
07-11 4250
unity使用TextMeshPro实现聊天图文混排
【HarmonyOS NEXT应用开发】案例117：基于原生能力实现图文混排
xzs51job的专栏
09-05 41
参与相对布局的容器内组件必须设置id，不设置id的组件组件不显示，容器id固定为__container__。使用StyledString实现图文混排效果，首先得让Text组件与StyledString绑定，绑定后即可使用StyledString设置文本样式以及对文本进行增、删、改、查等操作。应用中基于原生能力实现图文混排效果有多个方案可实现，推荐使用Flex作父容器实现的方案（方案一），此方案优点在于节点数量少，结构简单。内部头像使用Image组件，中间部分使用Text文本组件，右边使用Text文本组件。
【鸿蒙实战开发】HarmonyOS原生能力实现图文混排
HarmonyOS007的博客
08-05 483
●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
鸿蒙开发5.0【基于RichEditor的评论编辑】
2301_76813281的博客
08-23 1030
RichEditor是支持图文混排和文本交互式编辑的组件，在我们使用的APP中是很常见的，比如评论区编辑内容发布、对话框或者聊天室。下面列举一些遇到的场景需求：
Android 实现图文混排
feng海涛
12-13 4727
Android 实现图文混排 需求： 在文字中间添加图片或者在文字后面添加图片； 文字换行后，图片在第二行的后面； 图片加点击事件，文字没有点击事件。 实现： 使用TextView + Imageview实现，第1点好实现，第2点不好搞； 自定义TextView实现； 使用ImageSpan + TextView实现。 今天说的是第三种实现：使用ImageSpan + TextView实现 效果图： 实现方法： Spannable.SPAN_EXCLUSIVE_EXCLUSIVE //前后都不包
Android 原生实现图文混排编辑器
06-12
在Android开发中，创建一个能够实现图文混排编辑器是一项挑战性的任务，因为这涉及到复杂的布局管理和图片处理。本文将详细解析如何使用Android原生控件来构建这样一个功能丰富的编辑器，支持网络图片和本地图片的...
实现带网络图片的html图文混排.docx
05-18
因此，我们需要使用特殊的方法来实现图文混排。 二、ImageGetter的作用 ImageGetter是一个接口，它提供了获取Drawable对象的方法。在本文中，我们将使用ImageGetter来加载网络图片。通过重写getDrawable方法，我们...
蒙泰5.0图文混排专业版
03-05
"蒙泰5.0图文混排专业版"是一款专为设计和出版行业打造的...综上所述，蒙泰5.0图文混排专业版是一个功能强大的工具，无论是对于初学者还是资深设计师，都能满足他们在图文混排领域的各种需求，实现专业级别的设计作品。
egret_基于TextFlow属性实现图文混排.rar
12-05
在本文中，我们将深入探讨如何在Egret游戏引擎中利用TextFlow属性实现图文混排。Egret是一个流行的开源JavaScript框架，专为2D游戏开发设计，它提供了丰富的图形渲染和交互功能。然而，Egret的默认TextField组件（即...
HarmonyOS开发实战（ Beta5版）线程间通信场景最佳实践
weixin_55362248的博客
09-02 1082
在应用开发中，经常会需要处理一些耗时的任务，如果全部放在主线程中执行就会导致阻塞，从而引起卡顿或者掉帧现象，降低用户体验，此时就可以将这些耗时操作放到子线程中处理。
HarmonyOS开发实战（ Beta5版）跨线程序列化耗时点分析工具使用规范指南
weixin_55362248的博客
09-02 1414
DevEco Studio新增主线程序列化和反序列化检测能力，同时支持配置序列化/反序列化超时阈值。对于超过阈值的序列化和反序列化操作，在泳道中给出告警提示，并可以关联该时刻的调用栈信息，更好地帮忙开发者定位性能问题。
HarmonyOS开发实战（ Beta5版）多线程能力场景化示例最佳实践
weixin_55362248的博客
09-02 1575
并发的意思是多个任务同时执行。并发模型分为两大类：基于内存共享的并发模型和基于消息传递的并发模型。
HarmonyOS开发实战（ Beta5版）不要使用函数/方法作为复用组件的入参规范实践
weixin_55362248的博客
09-03 1148
复用时会触发组件的构造，如果函数入参中存在耗时操作，会影响复用性能。
鸿蒙轻内核M核源码分析系列二一 02 文件系统LittleFS
最新发布
鸿蒙开发知识记录
09-05 341
会分2部分来介绍结构体部分，先介绍LittleFS文件系统的结构体，然后介绍LiteOS-M内核中提供的和LittleFS相关的一些结构体。
鸿蒙OS创新实践：动态声控话筒开发指南
s297165331的专栏
09-05 355
在鸿蒙OS的生态中，开发者们不断探索和创新，以期为用户带来更丰富的交互体验。最近，我萌生了一个想法：制作一个能够随着声音动态变化的话筒组件。尽管网络上缺乏现成的参考案例，但我决定亲自动手，将这一创意变为现实。本文将深入解析这一开发过程，分享我的实战经验和技术细节。通过本文的详细解析，我们不仅实现了一个动态声控话筒组件，还深入了解了鸿蒙OS中的绘图API和动态效果实现方法。希望这篇文章能够为其他开发者提供灵感和指导，共同推动鸿蒙生态的创新与发展。
鸿蒙（API 12 Beta5版）【通过文本生成码图】
鸿蒙的技术博客
08-30 3188
码图生成能力支持将字符串转换为自定义格式的码图。
鸿蒙OS试题（2）
SSRppIG的博客
08-31 987
随着开发的深入，项目中的ArkTS源代码文件逐渐积累了大量import语句，其中不乏未使用的import以及不规范的排序情况，关于DevEco studio的编辑器的“optimize Imports”，以下说法正确的是。3、在发布时，常常会修正一些在发布过程中发现的问题。3、靠人手堂恢复环境。D.反向调试能力:允许开发者在调试过程中回退回到之前的代码行或断点，不仅查看过去的堆栈信息，还能重现历史的全局、静态和局部变量状态，帮助深入理解代码历史行为，特鄙视对于复杂逻辑和难以浮现的bug定位至关重要。
鸿蒙（API 12 Beta6版）图形【 请求动画绘制帧率】方舟2D图形服务
鸿蒙的技术博客
09-03 999
ArkGraphics 2D（方舟2D图形服务 ）主要提供图形绘制与显示相关的能力。开发者可以基于一套统一的图形接口进行应用开发，使应用开发更简单、高效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值