HarmonyOS鸿蒙实战（ Beta6版）基于Flex作父容器实现图文混排实践方案

于 2024-09-02 21:46:47 发布
阅读量323 收藏 4
点赞数 7
分类专栏： HarmonyOS OpenHarmony 鸿蒙 文章标签： harmonyos 华为 前端 linux 鸿蒙 移动开发 鸿蒙开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84917132/article/details/141830024
版权
HarmonyOS 同时被 3 个专栏收录
170 篇文章 0 订阅
订阅专栏
OpenHarmony
170 篇文章 0 订阅
订阅专栏
鸿蒙
170 篇文章 0 订阅
订阅专栏

场景描述

应用中基于原生能力实现图文混排效果有多个方案可实现，推荐使用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__。

核心代码

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

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

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

核心代码

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

核心代码

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

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。 

为了确保高效学习，建议规划清晰的学习路线

GitCode - 全球开发者的开源社区,开源代码托管平台 希望这一份鸿蒙学习文档能够给大家带来帮助~

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.学习视频+学习PDF文档

HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

​​

 纯血版鸿蒙全套学习文档（面试、文档、全套视频等）

                   

​​​​鸿蒙APP开发必备

​​

总结

【纯血版鸿蒙全套最新学习文档】

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。 

太空人_喜之郎
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
unity实战之TextMeshPro实现聊天图文混排
爱上游戏开发
07-11 4238
unity使用TextMeshPro实现聊天图文混排
【鸿蒙实战开发】HarmonyOS原生能力实现图文混排
HarmonyOS007的博客
08-05 478
●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
鸿蒙（HarmonyOS）性能优化实战-应用列表场景性能提升
m0_70748458的博客
06-12 1259
本文会介绍开发列表场景时的4种推荐优化方法，通过独立使用或组合使用这些优化方法，可以获得在启动时间、内存和系统资源方面的平衡，提升性能和用户体验。懒加载：提供列表数据按需加载能力，解决一次性加载长列表数据耗时长、占用过多资源的问题，可以提升页面响应速度。缓存列表项：提供屏幕可视区域外列表项长度的自定义调节能力，配合懒加载设置可缓存列表项参数，通过预加载数据提升列表滑动体验。组件复用。
【鸿蒙实战开发】HarmonyOS语法以及各种基础组件
HarmonyOS_666的博客
07-12 1003
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
egret_基于TextFlow属性实现图文混排.rar
12-05
在本文中，我们将深入探讨如何在Egret游戏引擎中利用TextFlow属性实现图文混排。Egret是一个流行的开源JavaScript框架，专为2D游戏开发设计，它提供了丰富的图形渲染和交互功能。然而，Egret的默认TextField组件（即...
实现带网络图片的html图文混排.docx
05-18
因此，我们需要使用特殊的方法来实现图文混排。 二、ImageGetter的作用 ImageGetter是一个接口，它提供了获取Drawable对象的方法。在本文中，我们将使用ImageGetter来加载网络图片。通过重写getDrawable方法，我们...
Flex 4 中 实现 图文混排
06-13
在Flex 4中实现图文混排是一个常见的需求，特别是在创建用户界面或开发富互联网应用程序时。Flex 4，也称为Spark架构，提供了更强大的布局管理器和组件库，使得图文混排变得更加灵活和可控。本篇文章将深入探讨如何...
基于Objective-C语言实现图文混排的编辑器源码.zip
08-02
本项目提供的"基于Objective-C语言实现图文混排的编辑器源码"是为iOS应用设计的一个功能强大的编辑器，允许用户在单个视图中自由组合文字和图像，为移动应用的内容创建提供了丰富的可能性。 首先，我们要理解...
HarmonyOS开发实战（ Beta5版）应用滑动场景帧率问题分析最佳实践
最新发布
weixin_55362248的博客
09-01 747
应用运行时的流畅度，涉及人因要素，不完全等同于应用系统性能。其中帧率问题，可以从如下几个指标进行衡量。
鸿蒙（ Beta5.0版）开发实战：自定义TabBar页签
weixin_55362248的博客
08-29 1719
依次点击tabBar页面，除了社区图标之外，其它图标往上移动一小段距离。
HarmonyOS开发实战（ Beta5版）减小应用包大小
weixin_55362248的博客
08-30 1315
当前DevEco Studio默认打包应用时不压缩so库文件，配置so压缩选项后，DevEco Studio会将so库文件以压缩形式打包到包中，从而减小应用包大小。
鸿蒙（API 12 Beta3版）【使用AVScreenCapture录屏取原始码流(C/C++)】视频播放与录制
鸿蒙的技术博客
08-27 1115
屏幕录制主要为主屏幕录屏功能。 开发者可以调用录屏（AVScreenCapture）模块的C API接口，完成屏幕录制，采集设备内、麦克风等的音视频源数据。当开发直播、办公等应用时，可以调用录屏模块获取音视频原始码流，然后通过流的方式流转到其他模块处理，达成直播时共享桌面的场景。
鸿蒙OpenHarmony、HarmonyOS、HarmonyOS NEXT的区别
01234567890
08-27 707
鸿蒙OpenHarmony、HarmonyOS、HarmonyOS NEXT三个版本区别
鸿蒙位置服务
qq_46025779的博客
08-27 498
3、看一下用户是否授权，没有授权拉起弹窗让用户授权。在module.json5文件下申请位置权限。4、把这个方法加到页面启动的时候就查。6、在添加一个页面就ok了。5、开始获取当前位置。
消息称华为纯血鸿蒙部分应用采用虚拟机方案
weixin_41446370的博客
08-29 661
华为预计在11月发布正式版纯血鸿蒙，为了能够适配更多的App，官方也是有了新的解决方案。之前，余承东表示，鸿蒙原生应用进入全面冲刺阶段，TOP 5000应用全部启动，满足用户使用时长99.9%，1500多个已经完成上架，18个领域全覆盖。他表示，希望在2024年之前，在中国市场将99%以上手机使用时间占比的5000个应用完全迁移到鸿蒙原生操作系统上，以实现操作系统和应用生态的统一。虚拟机方案的引入也给了开发者更多的时间来完成适配工作，确保应用能够在鸿蒙系统上更好地运行。
HarmonyOS NEXT 体验电话拨打
weixin_69135651的博客
08-27 566
使用了ArkTS的装饰器语法，如@Entry和@Component组件。代码开始部分导入了必要的常量、类型和函数。应用了一些通用样式，如字体大小、颜色、边距等，以确保界面的一致性和美观性。基于鸿蒙Next模拟电话通讯录，可以拨打电话，删除电话等。客户服务、业务咨询、回访处理、沟通交流、信息交流等等。第一步：点击拨打点电话，先判断设备是否具备通讯能力。整个界面使用Column布局，将各个元素垂直排列。使用Row布局来组织水平方向的元素，如拨打按钮。使用了如@Builder 装饰器自定义了组件。
鸿蒙状态管理
qq_36197716的博客
09-01 757
我们开发中构建的页面多为静态页面。如果希望构建一个动态的，有交互的界面，就需要引入‘状态’的概念用户构建了一个UI模型，其中应用的运行时的状态是参数，当参数改变时，UI作为返回结果，也将进行对应的改变。状态变化带来UI的重新渲染。自定义组件拥有变量所谓属性，必须被装饰器修饰才可以成为状态变量，状态变量的改变会引起UI的渲染刷新，如果不使用状态变量，UI只能在初始化时渲染，后续将不会再刷新。State状态：驱动UI更新的数据，用户通过触发组件的事件方法，改变状态数据。
瑞芯微RK3566开发板USB OTG模式介绍及命令切换，触觉智能EVB3566主板鸿蒙硬件厂商
Industio_CSDN的博客
08-29 1130
device模式下拔插usb将会进入host模式，需要使用命令重新进入device模式才能继续进行调试。为u盘等设备供电，不可以进行调试，连接adb或者烧录等操作。可以进行调试，连接adb或者烧录等操作，即USB OTG。USB OTG 支持host 和device 模式的切换。不同设备的USB OTG接口位置需要看对应设备的说明文档。上电前，使用USB 数据线，连接主板和PC。上电前，插着U盘或者未接USB设备。上电后默认为device模式。上电后默认作为host模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值