Text 组件如何渲染图文动态混排

Text 组件如何渲染图文动态混排

HarmonyOS
2024-06-04 23:25:01
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
__catcher

可以使用Foreach遍历渲染注意: mage或者ImageSpan目前规格上只支持常量,把提取出来设置的string用$r( )包裹着就可以了,如 localImageName = $r( ‘app.media.icon’ )

示例代码

class Article { 
  id: string; 
  title: string; 
  brief: string; 
 
  constructor(id: string, title: string, brief: string) { 
    this.id = id; 
    this.title = title; 
    this.brief = brief; 
  } 
} 
 
@Entry 
@Component 
struct ArticleListView { 
  @State isListReachEnd: boolean = false; 
 
  @State articleList: Array<Article> = [ 
    new Article('001', 'app.media.icon', '聊天内容1'), 
    new Article('002', 'app.media.icon', '聊天内容2'), 
    new Article('003', 'app.media.icon', '聊天内容3'), 
    new Article('004', 'app.media.icon', '聊天内容4'), 
    new Article('005', 'app.media.icon', '聊天内容5'), 
    new Article('006', 'app.media.icon', '聊天内容6') 
  ] 
 
 
  loadMoreArticles() { 
    this.articleList.push(new Article('007', 'app.media.icon', '加载新的内容')); 
  } 
  build() { 
    Column({ space: 5 }) { 
      List() { 
        ForEach(this.articleList, (item: Article) => { 
          ListItem() { 
            ArticleCard({ article: item }) 
              .margin({ top: 20 }) 
          } 
        }, (item: Article) => item.id) 
      } 
      .onReachEnd(() => { 
        this.isListReachEnd = true; 
      }) 
      .parallelGesture( 
        PanGesture({ direction: PanDirection.Up, distance: 80 }) 
          .onActionStart(() => { 
            if (this.isListReachEnd) { 
              this.loadMoreArticles(); 
              this.isListReachEnd = false; 
            } 
          }) 
      ) 
      .padding(20) 
      .scrollBar(BarState.On) 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xF1F3F5) 
  } 
} 
 
@Component 
struct ArticleCard { 
  @Prop article: Article; 
 
  build() { 
    Row() { 
      Column() { 
        Text(){ 
 
          Span(this.article.brief) 
            .fontSize(16) 
            .fontColor(Color.Gray) 
            .margin({ bottom: 8 }) 
          ImageSpan($r( 'app.media.icon' )) 
            .width('200px') 
            .height('200px') 
            .objectFit(ImageFit.Fill) 
            .verticalAlign(ImageSpanAlignment. 
        } 
        .fontSize(16) 
        .fontColor(Color.Gray) 
        .margin({ bottom: 8 }) 
      } 
      .alignItems(HorizontalAlign.Start) 
      .width('80%') 
      .height('100%') 
    } 
    .padding(20) 
    .borderRadius(12) 
    .backgroundColor('#FFECECEC') 
    .height(120) 
    .width('100%') 
    .justifyContent(FlexAlign.SpaceBetween) 
  } 
}
分享
微博
QQ
微信
回复
2024-06-05 19:57:46
相关问题
有人知道如何实现图文混排吗?
339浏览 • 1回复 待解决
如何选择图文混排的实现方案
697浏览 • 1回复 待解决
Text 组件如何加载Unicode字符
505浏览 • 1回复 待解决
ArkUI如何通过代码动态创建组件
846浏览 • 1回复 待解决
如何动态设置组件属性的值
321浏览 • 1回复 待解决
ListItem 组件渲染错误空白内容
357浏览 • 1回复 待解决
如何获取Text组件中文字的宽度
602浏览 • 1回复 待解决
组件如何动态设置全局唯一ID?
5563浏览 • 1回复 待解决
Text组件布局过界问题
344浏览 • 1回复 待解决
Text组件是否支持多行显示
569浏览 • 1回复 待解决
组件状态修改与build渲染机制
315浏览 • 1回复 待解决
Web组件是否支持离屏渲染
478浏览 • 0回复 待解决
DirectionalLayout 动态添加组件问题
2958浏览 • 1回复 待解决
ets怎么实现动态添加组件
2024浏览 • 1回复 待解决
Text组件是否支持小图片和表情包
559浏览 • 1回复 待解决