请问Text有没有相关属性,可以设置被标注的分词高亮标红显示

请问Text有没有相关属性,可以设置被标注的分词高亮标红显示。

HarmonyOS
2024-10-08 11:36:38
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

参考demo:

export enum SpanType {  
  normal,  
  hyperlink,  
}  
export class CustomSpan {  
  public content: string | Resource  
  public type: SpanType  
  public event: () => void  
  
  constructor(content: string | Resource, type: SpanType = SpanType.normal, event: () => void = () => {  
  }) {  
    this.content = content  
    this.type = type  
    this.event = event  
  }  
  
  normal(): CustomSpan {  
    this.type = SpanType.normal  
    return this  
  }  
  
  hyperlink(event: () => void): CustomSpan {  
    this.type = SpanType.hyperlink  
    this.event = event  
    return this  
  }  
}  
  
export class CustomText {  
  public static readonly PLACEHOLDER = new RegExp('(%[1-9]{1}[0-9]{0,}\\$s)')  
  public spans: Array<CustomSpan>  
  
  constructor(spans: Array<CustomSpan> = []) {  
    this.spans = spans  
  }  
  
  append(span: CustomSpan): CustomText {  
    this.spans.push(span)  
    return this  
  }  
  
  appendNormal(text: string | Resource): CustomText {  
    this.append(new CustomSpan(text).normal())  
    return this  
  }  
  
  appendHyperlink(text: string | Resource, onClick: () => void): CustomText {  
    this.append(new CustomSpan(text).hyperlink(onClick))  
    return this  
  }  
  
  format(format: string | Resource, args: Array<CustomSpan> = []): CustomText {  
    if (!format || !args || args?.length === 0) {  
      this.appendNormal(format)  
      return this  
    }  
  
    if (typeof format === 'string') {  
      if (format.length !== 0) {  
        this.resolve(format, args)  
      }  
    } else {  
      try {  
        let value: string = getContext(this).resourceManager.getStringSync(format)  
        if (value && value.length !== 0) {  
          this.resolve(value, args)  
        }  
      } catch (e) {  
        console.warn(`CustomText getStringSync: ${JSON.stringify(format)} exception: ${e}`);  
      }  
    }  
    return this  
  }  
  
  private resolve(format: string, args: Array<CustomSpan>): CustomText {  
    let length: number = args.length  
  
    format.split(CustomText.PLACEHOLDER).forEach((value: string, index: number) => {  
      if (!value.match(CustomText.PLACEHOLDER)) {  
        this.appendNormal(value)  
        return  
      }  
      let argIndex: number = Number(value.replace('%', '').replace('$s', '')) - 1  
      if (argIndex >= length) {  
        return  
      }  
      let span: CustomSpan = args[argIndex++]  
      if (span.type === SpanType.normal) {  
        this.appendNormal(span.content)  
      } else if (span.type === SpanType.hyperlink) {  
        this.appendHyperlink(span.content, span.event)  
      }  
    })  
    return this  
  }  
}  
使用:  
// TextDemoPage.ets  
import { CustomSpan, CustomText, SpanType } from '../view/TestTen';  
  
class DeclareDemo {  
  format: string | Resource = ''  
  args: CustomSpan[] = []  
}  
  
@Entry  
@Component  
struct TextDemoPage {  
  urlRegex = /测试一下/g;  
  @State declare: DeclareDemo = {  
    format: '',  
    args: []  
  }  
  @State textDeclare: Array<CustomText> = []  
  
  aboutToAppear(): void {  
    let text: string = '这是一个示例文本测试一下。哈哈哈哈哈哈哈测试一下 哈哈哈哈哈测试一下'  
    let urls = text.match(this.urlRegex)  
    let newText: string = text  
    if(urls) {  
      let args: CustomSpan[] = []  
      urls.forEach((url, idx) => {  
        newText = newText.replace(url, `%${idx+1}$s`)  
        args.push(new CustomSpan(url).hyperlink(() => {  
          console.log('111111111111---url: ', url)  
        }),)  
      });  
      this.declare = {  
        format: newText,  
        args: args  
      }  
  
      this.textDeclare = [new CustomText().format(this.declare.format, this.declare.args)]  
      console.log('111 -this.textDeclare: ', JSON.stringify(this.textDeclare))  
    }  
  }  
  
  build() {  
    Row() {  
      Column() {  
        ForEach(this.textDeclare, (declare: CustomText, index) => {  
          Text() {  
            ForEach(declare.spans, (span: CustomSpan) => {  
              if (span.type == SpanType.normal) {  
                Span(span.content)  
                  .fontSize(14)  
                  .fontColor('#191919')  
              } else if (span.type == SpanType.hyperlink) {  
                Span(span.content)  
                  .fontSize(14)  
                  .fontColor('#007dff')  
                  .decoration({type: TextDecorationType.None, color: '#007dff'})  
                  .onClick(() => {  
                    if (span.event) {  
                      span.event()  
                    }  
                  })  
              }  
            })  
          }  
        })  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-08 15:39:30
相关问题
Text匹配文字高亮显示
819浏览 • 1回复 待解决
有没有低代码相关文档可以阅读?
2744浏览 • 1回复 待解决
有没有NativeVSync相关使用文档
1903浏览 • 1回复 待解决
HarmonyOS ArkTS有没有相关资料?
105浏览 • 1回复 待解决
HarmonyOS 有没有蓝牙,NFC相关DEMO
301浏览 • 1回复 待解决
有没有maobox 鸿蒙版相关移植?
6339浏览 • 2回复 待解决
HarmonyOS有没有蓝牙相关操作demo
329浏览 • 1回复 待解决
请问有没有支持.9图方案?
217浏览 • 1回复 待解决
鸿蒙有没有clipToPadding所对应属性
4877浏览 • 1回复 待解决
组件有没有支持事件穿透属性
1748浏览 • 1回复 待解决
哪个属性可以改变Text组件字体粗细
1872浏览 • 1回复 待解决
HarmonyOS有没有拨打电话相关资料
329浏览 • 1回复 待解决
请问API有没有录屏功能
9003浏览 • 1回复 待解决
请问鸿蒙中有没有@Keep注解
7934浏览 • 2回复 待解决
离线webview组件有没有相关使用文档
1624浏览 • 1回复 待解决