当前位置: 首页 > article >正文

纯血鸿蒙APP实战开发——Text实现部分文本高亮和超链接样式

介绍

本示例通过自定义Span类型,在Text组件中使用ForEach遍历,根据不同的Span类型生成不同样式和功能的Span组件,实现部分文本高亮和超链接。

效果图预览

使用说明

  1. 点击超链接,根据链接类型出现相应提示弹窗。
  2. 长按消息卡片出现提示弹窗。

实现思路

  1. 定义 CustomSpanType 枚举类型,此处定义了 Normal、Hashtag、Mention、VideoLink 和 DetailLink 五种类型。
export enum CustomSpanType {
  Normal, // 普通文本,不含任何特殊格式或标记
  Hashtag, // 话题标签
  Mention, // @提及
  VideoLink, // 视频链接
  DetailLink // 正文详情
}
  1. 创建 CustomSpan 数据类,用于表示不同类型的 Span 对象。
export class CustomSpan {
  type: CustomSpanType; // 文本类型
  content: string; // 文本内容
  url?: string; // 跳转的链接地址

  constructor(type: CustomSpanType = CustomSpanType.Normal, content: string, url?: string) {
    this.type = type;
    this.content = content;
    if (url) {
      this.url = url;
    }
  }
}
  1. 使用 Text 组件结合 ForEach 方法遍历 spans 中的 CustomSpan 对象,根据不同的 Span 类型生成不同样式和功能的 Span 组件。
Text() {
  ForEach(this.spans, (item: CustomSpan) => {
    if (item.type === CustomSpanType.Normal) {
      Span(item.content)
        .fontSize($r('app.string.ohos_id_text_size_body1'))
    } else if (item.type === CustomSpanType.Hashtag || item.type === CustomSpanType.Mention || item.type === CustomSpanType.DetailLink) {
      TextLinkSpan({ item: item })
    } else {
      VideoLinkSpan({ item: item })
    }
  })
}
.width($r('app.string.styled_text_layout_100'))
.fontSize($r('app.string.ohos_id_text_size_body1'))
.margin({ top: $r('app.string.ohos_id_card_margin_start') })
  1. 对于 Normal 类型的 Span,直接使用 Span 组件展示文本内容,并设置相应的样式。
Span(item.content)
  .fontSize($r('app.string.ohos_id_text_size_body1'))
  1. 对于 Hashtag、Mention 和 DetailLink 类型的 Span,在 TextLinkSpan 组件中添加带有超链接功能的 Span 组件,根据 CustomSpan 的类型和内容,实现对应的样式和交互功能,例如显示提示信息或执行其他操作。
@Component
struct TextLinkSpan {
  @State linkBackgroundColor: Color | Resource = Color.Transparent; // 超链接背景色
  private item: CustomSpan = new CustomSpan(CustomSpanType.Normal, '');
  @State myItem: CustomSpan = this.item;

  aboutToAppear(): void {
    // LazyForEach中Text组件嵌套自定义组件会有数据初次不渲染问题,异步修改状态变量更新视图
    setTimeout(() => {
      this.myItem = this.item;
    })
  }

  build(){
    Span(this.myItem.content)
      .fontColor($r('app.color.styled_text_link_font_color'))// 超链接字体颜色
      .fontSize($r('app.string.ohos_id_text_size_body1'))
      .textBackgroundStyle({ color: this.linkBackgroundColor })
      .onClick(() => {
        this.linkBackgroundColor = $r('app.color.styled_text_link_clicked_background_color'); // 点击后的背景色
        setTimeout(() => {
          this.linkBackgroundColor = Color.Transparent;
        }, BACKGROUND_CHANGE_DELAY)
        // 根据文本超链接的类型做相应处理
        if (this.myItem.type === CustomSpanType.Hashtag) {
          promptAction.showToast({
            message: $r('app.string.styled_text_hashtag_toast_message')
          });
        } else if (this.myItem.type === CustomSpanType.Mention) {
          promptAction.showToast({
            message: $r('app.string.styled_text_user_page_toast_message')
          });
        } else {
          promptAction.showToast({
            message: $r('app.string.styled_text_content_details_toast_message')
          });
        }
      })
  }
}
如果你对这篇鸿蒙开发技术分析感兴趣,还请帮忙来个“素质三连”,后续带你探索 “→更多←” 鸿蒙开发的技术奥秘!

  1. 对于 VideoLink 类型的 Span,使用 VideoLinkSpan 组件添加图标和超链接功能,在点击事件中显示提示信息或执行跳转视频页操作。
@Component
struct VideoLinkSpan {
  @State linkBackgroundColor: Color | Resource = Color.Transparent;
  private item: CustomSpan = new CustomSpan(CustomSpanType.Normal, '');
  @State myItem: CustomSpan = this.item;

  aboutToAppear(): void {
    // LazyForEach中Text组件嵌套自定义组件会有数据初次不渲染问题,异步修改状态变量更新视图
    setTimeout(() => {
      this.myItem = this.item;
    })
  }

  build() {
    ContainerSpan() {
      ImageSpan($r('app.media.styled_text_ic_public_video'))
        .height($r('app.integer.styled_text_video_link_icon_height'))
        .verticalAlign(ImageSpanAlignment.CENTER)
      Span(this.myItem.content)
        .fontColor($r('app.color.styled_text_link_font_color'))
        .fontSize($r('app.string.ohos_id_text_size_body1'))
        .onClick(() => {
          this.linkBackgroundColor = $r('app.color.styled_text_link_clicked_background_color');
          setTimeout(() => {
            this.linkBackgroundColor = Color.Transparent;
          }, BACKGROUND_CHANGE_DELAY)
          promptAction.showToast({
            message: $r('app.string.styled_text_video_function_message')
          });
        })
    }
    .textBackgroundStyle({ color: this.linkBackgroundColor })
  }
}

高性能知识点

本示例使用了LazyForEach进行数据懒加载

工程结构&模块类型

   styledtext                                   // har类型
   |---/src/main/ets/mock                        
   |   |---MockData.ets                         // mock数据
   |---/src/main/ets/model                        
   |   |---DataSource.ets                       // 列表数据模型                        
   |   |---TextModel.ets                        // 数据类型定义
   |---/src/main/ets/pages                        
   |   |---StyledText.ets                       // 视图层-主页面

模块依赖

  1. 本实例依赖common模块中的资源文件。
  2. 本示例依赖动态路由模块来实现页面的动态加载。

http://www.kler.cn/a/447542.html

相关文章:

  • AI的进阶之路:从机器学习到深度学习的演变(三)
  • ChromeOS 131 版本更新
  • 【AI学习】Huggingface复刻Test-time Compute Scaling技术
  • 2.4 libpcap和dpdk的区别
  • UDP系统控制器_音量控制、电脑关机、文件打开、PPT演示、任务栏自动隐藏
  • 拼多多电子面单接入:常见问题及专业解决方案
  • el-tabs标签过多
  • TCP与UDP的端口连通性
  • Ubuntu22.04安装CH340/CH341驱动
  • Python自动化测试图片比对算法
  • 电商项目-网站首页高可用(二)
  • 常用数据库类型介绍
  • 从 Vue 迈向 React:平滑过渡与关键注意点全解析
  • 翻转(蓝桥杯2023大学C组试题E)
  • 力扣274. H 指数
  • 【八大排序(二)】希尔排序
  • 5_HTML5 SVG (1) --[HTML5 API 学习之旅]
  • 深入理解贪心算法:核心概念与实践
  • 类的动态演绎:程序运行中的生命绽放
  • 多模态医学图像融合概述
  • windows C#-静态构造函数
  • 计算机网络之多路转接epoll
  • bestphp‘s revenge
  • linux内核网络分层概述
  • Vue中<script setup></script>的主要语法元素和特性
  • redis开发与运维-redis02-redis数据类型与命令总结