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

在设计应用界面时，我们经常需要对某些重要的文本进行高亮表现，以引起用户的注意。同时，在一些场景中，我们需要确保长文本可以或许自动换行，以顺应差别的屏幕尺寸和布局需求。本文将通过两个示例，分别展示如安在HarmonyOS应用中实现这些功能。
【示例一】文本高亮表现

1. @Entry
2. @Component
3. struct Page01 {
4.   @State originalText: string = '混沌未分天地乱，茫茫渺渺无人见。自从盘古破鸿蒙，开辟从兹清浊辨。';
5.   @State highlightKeyword: string = '鸿蒙'; // 需要高亮显示的关键字
6.   @State highlightedSegments: string[] = [];
8.   // 分割原始文本并保留关键字
9.   private splitAndHighlight(text: string, keyword: string): string[] {
10.     let segments: string[] = [];
11.     let lastMatchEnd: number = 0;
12.     while (true) {
13.       const matchIndex = text.indexOf(keyword, lastMatchEnd);
14.       if (matchIndex === -1) {
15.         segments.push(text.slice(lastMatchEnd));
16.         break;
17.       } else {
18.         segments.push(text.slice(lastMatchEnd, matchIndex));
19.         segments.push(text.slice(matchIndex, matchIndex + keyword.length));
20.         lastMatchEnd = matchIndex + keyword.length;
21.       }
22.     }
23.     return segments;
24.   }
26.   // 页面即将出现时进行文本分割
27.   aboutToAppear() {
28.     this.highlightedSegments = this.splitAndHighlight(this.originalText, this.highlightKeyword);
29.     console.info(`分割后的文本段落：${JSON.stringify(this.highlightedSegments)}`);
30.   }
32.   build() {
33.     Column({ space: 20 }) {
34.       Text() {
35.         ForEach(this.highlightedSegments, (segment: string, index: number) => {
36.           ContainerSpan() {
37.             ImageSpan($r('app.media.app_icon')).width(0).height(1);
38.             Span(segment).fontSize(30)
39.               .fontColor(segment === this.highlightKeyword ? Color.White : Color.Black)
40.               .onClick(() => {
41.                 console.info(`高亮文本被点击：${segment}`);
42.                 console.info(`点击索引：${index}`);
43.               });
44.           }.textBackgroundStyle({
45.             color: segment === this.highlightKeyword ? Color.Red : Color.Transparent
46.           });
47.         });
48.       }
49.     }.width('100%').height('100%');
50.   }
51. }

复制代码

在这个示例中，我们首先界说了一个字符串originalText作为原始文本，并指定了需要高亮表现的关键字highlightKeyword。然后，我们界说了一个splitAndHighlight函数来分割原始文本，并将包含关键字的部门与其他部门分开。在页面加载时，我们调用这个函数来获得分割后的文本段落，并使用Span组件来表现文本。需要注意的是，由于Span组件本身不支持直接设置配景颜色（即Span不支持.backgroundColor(Color.Orange)），因此设置配景色需要在Span外部嵌套ContainerSpan组件，并使用textBackgroundStyle属性来实现。
对于需要高亮表现的关键字部门，我们通过ContainerSpan组件的textBackgroundStyle属性来改变其配景颜色，同时保持字体颜色为白色，以确保高亮效果明显。
【示例二】文本自动换行

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

1. @Entry
2. @Component
3. struct Page02 {
4.   @State poemLines: string[] = [
5.     '混沌未分天地乱，',
6.     '茫茫渺渺无人见。',
7.     '自从盘古破鸿蒙，',
8.     '开辟从兹清浊辨。',
9.   ];
11.   build() {
12.     Column({ space: 10 }) {
13.       Text('Text + Span，文本无法自动换行').backgroundColor(Color.Orange);
14.       Text() {
15.         ForEach(this.poemLines, (line: string) => {
16.           Span(line);
17.         });
18.       }
19.       .fontSize(20);
21.       Text('Flex + Span，可以实现文本换行').backgroundColor(Color.Orange);
22.       Flex({ wrap: FlexWrap.Wrap }) {
23.         ForEach(this.poemLines, (line: string) => {
24.           Text(line).fontSize(20);
25.         });
26.       }
27.     }
28.     .width('100%').height('100%');
29.   }
30. }

复制代码

在这个示例中，我们界说了一个字符串数组poemLines，其中包含了多行诗句。我们展示了两种差别的方式来表现这些诗句：一种是使用Text和Span组件直接表现，这种方式默认不会自动换行；另一种是使用Flex容器，并设置wrap属性为FlexWrap.Wrap，如许可以使得子元素在超出容器宽度时自动换行。
【技能要点总结】
1. 文本高亮：
• 使用splitAndHighlight函数分割文本，并标记关键字。
• 使用ContainerSpan和Span组件组合实现配景高亮。
• 注意Span不支持直接设置配景颜色，需通过ContainerSpan的textBackgroundStyle属性实现。
2. 文本换行：
• 使用Flex容器并设置wrap属性为FlexWrap.Wrap，实现自动换行。
• 多行文本可以通过ForEach循环动态生成。
盼望本文能为正在学习或开辟HarmonyOS应用的开辟者们提供有效的参考和启示。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。