HarmonyOS鸿蒙Next实现文本场景化示例代码

HarmonyOS鸿蒙Next实现文本场景化示例代码

介绍

本示例为文本场景的整合demo，主要包括六个场景示例：多行文本只展示一行、跑马灯案例、展示全文、Text实现部分文本高亮和超链接样式、文本高亮标记功能、文字截断。

实现文本场景化源码链接

效果预览

![图片名称]

使用说明

点击对应模式按钮即可展示对应功能。

实现思路

  1. 多行文本展示一行： 使用measureText(options: MeasureOptions): number接口计算指定文本单行布局下的宽度；使用getDefaultDisplaySync(): Display获取屏幕宽度；使用屏幕宽度减去padding等需要减去的宽度获取屏幕可用宽度。

  2. 跑马灯案例：Text组件外层包裹一层Scroll组件，Scroll组件设置一定的百分比宽度值，并获取当前文本内容宽度和Scroll组件宽度。文本宽度大于 Scroll组件宽度时，通过添加判断显示同样的文本，在偏移过程中可实现文本接替并显示在同一显示区的效果。页面进来执行文本滚动函数scrollAnimation()，在指定的时间内完成文本的偏移，当循环一次之后，通过定时器setTimeout来实现停滞操作。

  3. 展示全文：用“屏幕宽度 * 最大行数 * 组件宽度比例”的结果和“实际文本宽度”进行比较大小，判断是否需要“…展开全文”； 当需要“…展开全文”时，只展示maxLines属性设置的固定高度的文本内容，当点击“…展开全文”时将该文本改成“…收起”并添加curves.springMotion曲线动画，同时在animateTo的显示动效的闭包函数中将maxLines属性值修改为-1使得该属性无效；当需要“…收起”时，将collapseText的值改为“…展开全文”，并设置收起动画。

  4. Text实现部分文本高亮和超链接样式：使用Text组件结合ForEach方法遍历spans中的CustomSpan对象，根据不同的Span类型生成不同样式和功能的Span组件；对于Hashtag、Mention和DetailLink类型的Span，在TextLinkSpan组件中添加带有超链接功能的Span组件，根据CustomSpan的类型和内容，实现对应的样式和交互功能，例如显示提示信息或执行其他操作；对于VideoLink类型的Span，使用VideoLinkSpan组件添加图标和超链接功能，在点击事件中显示提示信息或执行跳转视频页操作。

  5. 文本高亮标记功能：通过 Text 和 Span 组件，配合实现文本高亮标记和清除，并且通过键对数据库实现标记数据的持久化。

  6. 展示全文：使用measureText(options: MeasureOptions): number接口计算，监听到截断时显示。


更多关于HarmonyOS鸿蒙Next实现文本场景化示例代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

HarmonyOS鸿蒙Next实现文本场景化的示例代码可以通过使用ArkUI框架来实现。以下是一个简单的示例代码，展示如何在鸿蒙系统中实现文本的场景化显示。

import { Component, Text, Scener } from '@ohos.arkui';

@Component
struct TextSceneExample {
  build() {
    Scener({ sceneName: 'TextScene' }) {
      Text('Hello, HarmonyOS!')
        .fontSize(30)
        .fontColor('#000000')
        .textAlign('center')
        .margin({ top: 50 });
    }
  }
}

export default TextSceneExample;

在这个示例中，我们使用了Scener组件来创建一个名为TextScene的场景，并在其中放置了一个Text组件。Text组件显示了文本“Hello, HarmonyOS!”，并设置了字体大小、颜色、对齐方式以及上边距。

通过这种方式，可以在鸿蒙系统中实现文本的场景化显示，适用于需要在不同场景中展示不同文本内容的场景。

更多关于HarmonyOS鸿蒙Next实现文本场景化示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


此代码创建了一个 Text 组件，并根据场景（如“night”或“highlight”）动态调整文本颜色、背景色和字体大小。通过 setScene 方法，可以轻松切换文本样式以适配不同场景。

回到顶部