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

【示例一】文本高亮显示

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

@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