HarmonyOS鸿蒙Next中如何实现从英文文章中通过点击获取用户点击的单词

HarmonyOS鸿蒙Next中如何实现从英文文章中通过点击获取用户点击的单词 我们想做一个功能，就是我们需要从一段英文文章中通过点击能获取到用户点击的单词，怎么实现

3 回复

可以使用ForEach加Span组件实现cke_275.png

更多关于HarmonyOS鸿蒙Next中如何实现从英文文章中通过点击获取用户点击的单词的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可通过 Text 组件的 onClick 事件结合 textLayout.getText() 和 hitTestPoint() 方法获取点击位置的字符索引，再根据非字母字符分割提取完整单词。示例：Text 设置 text 属性，监听 onClick，获取点击坐标后调用 textLayout.getTextRangeForPoint(x, y) 返回选区范围，用 text.substring(range.start, range.end) 获取单词。

在 HarmonyOS Next 中，获取文章点击单词最实用的方式是：将文章按单词拆分为多个 Text 组件或 Span，各自绑定点击事件。

@Entry
@Component
struct WordClick {
  private text = "This is a sample article.";
  private words: string[] = this.text.split(/\s+/);

  build() {
    Flex({ wrap: FlexWrap.Wrap }) {
      ForEach(this.words, (word: string) => {
        Text(word + ' ')
          .onClick(() => {
            console.info('Clicked:', word);
          })
      })
    }
  }
}

该方案直接利用组件边界，无需坐标计算。注意标点可能紧贴单词，需预先清洗；长文时可结合 LazyForEach 优化性能。

回到顶部