首页 > 其他分享 >鸿蒙应用示例:实现文本高亮与自动换行

鸿蒙应用示例:实现文本高亮与自动换行

时间:2024-10-05 17:20:50浏览次数:10  
标签:Span string 鸿蒙 示例 换行 高亮 文本

在设计应用界面时,我们常常需要对某些重要的文本进行高亮显示,以引起用户的注意。同时,在一些场景中,我们需要确保长文本能够自动换行,以适应不同的屏幕尺寸和布局需求。本文将通过两个示例,分别展示如何在HarmonyOS应用中实现这些功能。

【示例一】文本高亮显示

鸿蒙应用示例:实现文本高亮与自动换行_鸿蒙

@Entry
@Component
struct Page01 {
  @State originalText: string = '混沌未分天地乱,茫茫渺渺无人见。自从盘古破鸿蒙,开辟从兹清浊辨。';
  @State highlightKeyword: string = '鸿蒙'; // 需要高亮显示的关键字
  @State highlightedSegments: string[] = [];
 
  // 分割原始文本并保留关键字
  private splitAndHighlight(text: string, keyword: string): string[] {
    let segments: string[] = [];
    let lastMatchEnd: number = 0;
    while (true) {
      const matchIndex = text.indexOf(keyword, lastMatchEnd);
      if (matchIndex === -1) {
        segments.push(text.slice(lastMatchEnd));
        break;
      } else {
        segments.push(text.slice(lastMatchEnd, matchIndex));
        segments.push(text.slice(matchIndex, matchIndex + keyword.length));
        lastMatchEnd = matchIndex + keyword.length;
      }
    }
    return segments;
  }
 
  // 页面即将出现时进行文本分割
  aboutToAppear() {
    this.highlightedSegments = this.splitAndHighlight(this.originalText, this.highlightKeyword);
    console.info(`分割后的文本段落:${JSON.stringify(this.highlightedSegments)}`);
  }
 
  build() {
    Column({ space: 20 }) {
      Text() {
        ForEach(this.highlightedSegments, (segment: string, index: number) => {
          ContainerSpan() {
            ImageSpan($r('app.media.app_icon')).width(0).height(1);
            Span(segment).fontSize(30)
              .fontColor(segment === this.highlightKeyword ? Color.White : Color.Black)
              .onClick(() => {
                console.info(`高亮文本被点击:${segment}`);
                console.info(`点击索引:${index}`);
              });
          }.textBackgroundStyle({
            color: segment === this.highlightKeyword ? Color.Red : Color.Transparent
          });
        });
      }
    }.width('100%').height('100%');
  }
}

在这个示例中,我们首先定义了一个字符串originalText作为原始文本,并指定了需要高亮显示的关键字highlightKeyword。然后,我们定义了一个splitAndHighlight函数来分割原始文本,并将包含关键字的部分与其他部分分开。在页面加载时,我们调用这个函数来获得分割后的文本段落,并使用Span组件来显示文本。需要注意的是,由于Span组件本身不支持直接设置背景颜色(即Span不支持.backgroundColor(Color.Orange)),因此设置背景色需要在Span外部嵌套ContainerSpan组件,并使用textBackgroundStyle属性来实现。

对于需要高亮显示的关键字部分,我们通过ContainerSpan组件的textBackgroundStyle属性来改变其背景颜色,同时保持字体颜色为白色,以确保高亮效果明显。

【示例二】文本自动换行

鸿蒙应用示例:实现文本高亮与自动换行_自动换行_02

接下来,我们来看一个文本自动换行的示例。在这个例子中,我们需要将多行文本按照一定的规则自动换行。

@Entry
@Component
struct Page02 {
  @State poemLines: string[] = [
    '混沌未分天地乱,',
    '茫茫渺渺无人见。',
    '自从盘古破鸿蒙,',
    '开辟从兹清浊辨。',
  ];
 
  build() {
    Column({ space: 10 }) {
      Text('Text + Span,文本无法自动换行').backgroundColor(Color.Orange);
      Text() {
        ForEach(this.poemLines, (line: string) => {
          Span(line);
        });
      }
      .fontSize(20);
 
      Text('Flex + Span,可以实现文本换行').backgroundColor(Color.Orange);
      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.poemLines, (line: string) => {
          Text(line).fontSize(20);
        });
      }
    }
    .width('100%').height('100%');
  }
}

在这个示例中,我们定义了一个字符串数组poemLines,其中包含了多行诗句。我们展示了两种不同的方式来显示这些诗句:一种是使用Text和Span组件直接显示,这种方式默认不会自动换行;另一种是使用Flex容器,并设置wrap属性为FlexWrap.Wrap,这样可以使得子元素在超出容器宽度时自动换行。


【技术要点总结】

1. 文本高亮:

• 使用splitAndHighlight函数分割文本,并标记关键字。

• 使用ContainerSpan和Span组件组合实现背景高亮。

• 注意Span不支持直接设置背景颜色,需通过ContainerSpan的textBackgroundStyle属性实现。

2. 文本换行:

• 使用Flex容器并设置wrap属性为FlexWrap.Wrap,实现自动换行。

• 多行文本可以通过ForEach循环动态生成。

希望本文能为正在学习或开发HarmonyOS应用的开发者们提供有用的参考和启示。

标签:Span,string,鸿蒙,示例,换行,高亮,文本
From: https://blog.51cto.com/u_16508701/12175069

相关文章

  • 鸿蒙应用示例:ArkTS中设置颜色透明度与颜色渐变方案探讨
    /***根据比例混合两个十六进制颜色值。*@paramcolorA第一个颜色的十六进制值,例如红色'#ff0000'。*@paramcolorB第二个颜色的十六进制值,例如黑色'#000000'。*@paramratio混合比例,0表示仅返回colorA,1表示仅返回colorB,介于0和1之间的值会混合两个颜色。......
  • 鸿蒙应用示例:应用开发中的动态获取属性与调用方法技巧
    随着HarmonyOS的发展,API版本的更新带来了许多新的特性和限制。在API11及以后的版本中,直接赋值对象的语法不再被支持,这要求开发者们采用新的方式来处理对象的创建和属性的访问。同时,HarmonyOS支持ETS(EnhancedTypeScript)文件,这是一种扩展了TypeScript的文件格式,用于更好地支持Harmo......
  • 鸿蒙应用示例:NEXT 中 Map 类型的使用及注意事项
    在JavaScript中,Map对象允许存储任何类型的键和值,提供了键值对的存储功能。在HarmonyOS中,Map的使用基本遵循JavaScript的标准,尤其是要注意set赋值只能用get获取,而索引赋值只能用索引获取。且它们可以同时赋值但遍历的方式又不同。【Map对象的赋值与获取】使用set方法赋值当你需要......
  • 征程6 工具链常用工具和 API 整理(含新手示例)
    1.引言征程6工具链目前已经提供了比较丰富的集成化工具和接口来支持模型的移植和量化部署,本帖将整理常用的工具/接口以及使用示例来供大家参考,相信这篇文章会提升大家对征程6工具链的使用理解以及效率。干货满满,欢迎访问2.hb_config_generatorhb_config_generator是用于获......
  • 第二百六十节 JPA教程 - JPA查询命名参数示例
    JPA教程-JPA查询命名参数示例JPQL支持两种类型的参数绑定语法。第一种是位置绑定,其中参数在查询字符串中通过问号后面跟随参数号来指示。执行查询时,开发人员指定应替换的参数编号。SELECTeFROMEmployeeeWHEREe.department=?1ANDe.salary>?2命名参数......
  • 鸿蒙应用示例:键盘管理从避免遮挡到显示监听的方案实践
    在HarmonyOS应用开发中,键盘管理是一个关键环节,直接影响着用户体验。本文将探讨HarmonyOS键盘管理的几个重要方面,包括如何避免软键盘遮挡输入框、键盘显示与隐藏的监听机制,以及如何手动控制键盘的显示与隐藏。一、避免软键盘遮挡输入框在默认情况下,当用户在输入框中输入文本时,软键盘......
  • 鸿蒙智联仅此4家生态解决方案合作伙伴
    在当今快速发展的物联网时代,鸿蒙智联(HarmonyOSConnect)作为华为面向智能硬件生态伙伴打造的全新品牌和开放平台,正引领着智能硬件行业的变革与创新。鸿蒙智联生态解决方案合作伙伴,作为这一生态中的重要力量,通过提供全方位的解决方案和技术支持,助力生态产品伙伴快速融入鸿蒙智联......
  • <<迷雾>> 第5章 从逻辑学到逻辑电路(4)--或门及其符号 示例电路
    info::操作说明鼠标单击开关切换开合状态系统中使用一个类似箭头的形状表示或门primary::在线交互操作链接https://cc.xiaogd.net/?startCircuitLink=https://book.xiaogd.net/cyjsjdmw-examples/assets/circuit/cyjsjdmw-ch05-13-or-gate.txt原图......
  • C++在游戏开发中的卓越性能:优势解析与代码示例
    在游戏开发领域,C++一直是一种备受青睐的编程语言。它以其高性能、灵活性和强大的功能集,成为了游戏开发者的首选语言之一。在本文中,我们将深入探讨C++在游戏开发中的优势,并提供一些代码示例来展示这些优势是如何在实际开发中发挥作用的。高性能与低级控制C++提供接近硬件......
  • 八字测算api接口数据示例_奥顺八字测算接口分享
    八字测算免费api接口,每日开放时间在早上8点到晚上十点,本api接口完全免费,是奥顺居八字测算网程序内部接口,提供本地调用的,现在免费分享出来,仅供测试。接口名称:八字精批测算api接口示例接口平台:奥顺居八字测算程序内部接口接口格式:JSON请求方式:HTTPSGET请求示例https://blog.w......