有人知道如何实现图文混排吗?

实现图文混排

HarmonyOS
2024-05-26 12:25:46
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
mzshj

本文主要用于实现图文混排,如商品卡片标题、图片小标前缀(活动、天猫标识等)+商品名/商品描述或者视频评论区可包含文字、表情包、图片混合排布。

使用的核心API

  • @ohos.font (注册自定义字体)
  • Span

核心代码解释

1.首先需要进行注册自定义在pages包的同一目录下创建一个font包,在font包中加入自己需要的字体。

2.通过text-span来实现图文的混排,如果需要加入表情包就需要有一个emoji的ttf文件注册的字体,然后在Text的familyfont进行设置。

import font from '@ohos.font' 
​ 
@Entry 
@Component 
struct SpanExample { 
scroller: Scroller = new Scroller() 
build() { 
  Scroll(this.scroller){ 
    Column() { 
      Text('英雄,安息!脚下这片土地是你浴血守卫的山河') 
        .fontSize(20) 
        .fontWeight(500) 
        .fontFamily('msyhl') 
      Flex({ alignItems: ItemAlign.Start }) { 
        Text() { 
          Span('今天,第十批25名在韩中国人民志愿军烈士遗骸安葬仪式在沈阳抗美援朝烈士陵园举行。' + 
            '自2014年起至今,连续十年,已有938位志愿军烈士忠魂回到这片他们用鲜血和生命守护的热土。') 
            .fontSize(20) 
            .fontWeight(500) 
            .fontFamily('STXINGKA') 
            .margin({ left: 120 }) 
          Span("❤❤❤😀") 
            .fontFamily('ARIALUNI') 
            .fontSize(20) 
            .height("10%") 
          ImageSpan($r("app.media.photo_1")) 
            .width('100%') 
            .height('20%') 
            .objectFit(ImageFit.Auto) 
            .verticalAlign(ImageSpanAlignment.CENTER) 
          Span(" ") 
          ImageSpan($r('app.media.photo_2')) 
            .width('100%') 
            .height('20%') 
            .objectFit(ImageFit.Auto) 
            .verticalAlign(ImageSpanAlignment.BOTTOM) 
          Span(" ") 
          ImageSpan($r('app.media.photo_3')) 
            .width('100%') 
            .height('20%') 
            .objectFit(ImageFit.Auto) 
            .verticalAlign(ImageSpanAlignment.BOTTOM) 
​ 
          Span("忠魂不泯,浩气长存,祖国和人民永远不会忘记!向英烈致敬!") 
            .fontSize(20) 
            .fontWeight(500) 
            .fontFamily('STXINGKA') 
            .margin({ left: 120 }) 
          ImageSpan($r('app.media.photo_4')) 
            .width('10%') 
            .height('5%') 
            .verticalAlign(ImageSpanAlignment.BOTTOM) 
        } 
        .width('100%') 
        .textIndent(50) 
​ 
​ 
      } 
    }.width('100%').height('100%').padding({ left: 0, right: 0, top: 0 }) 
  }.scrollable(ScrollDirection.Vertical) // 滚动方向纵向 
  .scrollBar(BarState.On) // 滚动条常驻显示 
  .scrollBarColor(Color.Gray) // 滚动条颜色 
  .scrollBarWidth(10) // 滚动条宽度 
  .edgeEffect(EdgeEffect.None) 
} 
}
分享
微博
QQ
微信
回复
2024-05-27 16:11:18
相关问题
如何选择图文混排实现方案
798浏览 • 1回复 待解决
Text 组件如何渲染图文动态混排
462浏览 • 1回复 待解决
如何实现振动,有人知道
713浏览 • 2回复 待解决
如何实现翻页功能,有人知道
672浏览 • 1回复 待解决
热重载该如何实现有人知道
360浏览 • 1回复 待解决
如何实现http长连接,有人知道
630浏览 • 1回复 待解决
如何实现防截屏功能,有人知道
836浏览 • 1回复 待解决
如何发送短信,有人知道?
673浏览 • 1回复 待解决
如何保存faultLogger ,有人知道
178浏览 • 1回复 待解决
有人知道JS menu如何隐藏
3221浏览 • 1回复 待解决
$$语法如何使用?有人知道
60浏览 • 1回复 待解决
如何跳出ForEach,有人知道
729浏览 • 1回复 待解决
弧形进度条实现有人知道方法
350浏览 • 1回复 待解决
导航栏如何适配,有人知道?
674浏览 • 0回复 待解决
如何使用快速修复,有人知道
256浏览 • 1回复 待解决
如何定义dialog动画,有人知道?
819浏览 • 1回复 待解决
如何引用HSP库,有人知道?
688浏览 • 1回复 待解决
IP地址如何转化,有人知道
251浏览 • 1回复 待解决
如何获取系统电量,有人知道
720浏览 • 1回复 待解决
如何获取组件高度,有人知道
683浏览 • 1回复 待解决
如何开启AOT编译模式,有人知道
795浏览 • 1回复 待解决
有人知道关于页demo
419浏览 • 1回复 待解决