[文章]英语单词学习页面+单词朗读实现 -- 【1】页面实现 ##HarmonyOS SDK AI##

​先看一下页面效果

​

整体页面是一个比较简洁的页面，其中有两个特色功能

1. 对于例句中，能够实现将当前的单词从句子中进行识别并突出显示
2. 对于单词和句子，可以进行朗读，这个朗读使用的是Core Speech Kit（基础语音服务），即端侧AI

我们分两篇文章来讲解

对于例句单词效果突出显示，一开始我想到的是“属性字符串StyledString/MutableStyledString”。

通过阅读相关文档，我认为属性字符串并不适用在此场景中，理由如下：

1. 每个单词的句子是不同的，所以没有办法提前设定好数据，即从第几个字到第几个字显示什么样式，其他字显示什么样式，要通过代码去分析
2. 每个单词可能有多句句子，在实际项目中，具体有几句句子是不确定的，那就要通过数组来弄多个controller，是非常不方便的

通过分析句子的结构，我们发现，句子就是单词+空格+单词+空格的形式构成的，因此完全可以通过split先把句子用空格来分割，再通过ForEach进行循环渲染，通过内容和单词的比对来判断是否对单词进行加粗处理

首先，我们先设置一下模拟数据，包括句子sentence，显示的单词word，和用来测试的数组test，这个test中每一个元素都是string

@State sentence:string = "The cat is sleeping";
  @State test:Array<string> = [];
  @State word:string = "the";

然后在aboutToAppear中对这个句子进行split分割

this.test = this.sentence.split(" ");

最后通过ForEach进行循环渲染，但是这里要注意的是，如果直接用== 或者 === 判断的话，是无法区分大小写的，因此要先把每一个单词通过toLowerCase转小写，然后再参与判断

ForEach(this.test,(item:string)=>{
     Text(item)
     .margin({right:5})
     .fontWeight(item.toLowerCase() == this.word ? 'bold' : '')
  })

这种实现方式相比于属性字符串来说，整体开发难度下降了很多，代码量也下降了很多，所以，还是需要根据针对性的场景来挑选具体的实现方案

​