HarmonyOS鸿蒙Next中属性字符串下的表达：打造高复用可定制化的协议弹窗

属性字符串

• 方便灵活应用文本样式的对象，可通过TextController中的setStyledString方法与Text组件绑定，可通过RichEditorStyledStringController中的setStyledString方法与RichEditor组件绑定。

说明

从API version 12开始支持。

属性字符串目前不支持在worker线程中使用。

属性字符串通过controller绑定时，需要等待布局完成后，绑定生效。当measure和setStyledString同时使用，开发者需要通过@ohos.arkui.inspector (布局回调)判断布局完成，再绑定属性字符串。

先来看下真机效果：

前置条件：

在模块的module.json5文件中加上网络访问权限：以此满足协议的正常跳转

"requestPermissions": [
   {
     "name": "ohos.permission.INTERNET"
   }
],

实现步骤：

1、自定义弹窗组件；

2、使用mutableStyledString给字符串自定义各种样式以及超链接；

3、使用Text()组件加载属性字符串。

注意：本案例仅作功能实现参考，具体封装细节请自己结合项目封装实现

完整代码：

@CustomDialog
export struct PrivacyDialog {
  private control?: CustomDialogController
  url1: UrlStyle =
    new UrlStyle("https://term.developer.huaweicloud.com/rest/developer/agreementservice/v1/developer/agreement/agreement-template?agr_type=90109&language=zh_cn&version=2025111113&region=cn");
  url2: UrlStyle = new UrlStyle("https://developer.huawei.com/consumer/cn/devservice/use");
  privacyStr = "欢迎使用 XXAPP！为了向您提供更优质的服务，我们需要获取以下权限：点击同意及表示您同意《生态隐私协议》和《开发者联盟网站使用条款》"
  mutableStyledString: MutableStyledString =
    new MutableStyledString(this.privacyStr);
  textController: TextController = new TextController();

  aboutToAppear(): void {
    //匹配筛选出《》所包裹的超协议文本的字符串起始位置及长度
    const urlRouterArr = matchBracketContent(this.privacyStr)
    const urls = [this.url1, this.url2]
    urlRouterArr.forEach((item, index) => {
      //给特定文本加上超链接
      this.mutableStyledString.setStyle({
        start: item.start,
        length: item.length,
        styledKey: StyledStringKey.URL,
        styledValue: urls[index],

      })
      //给超链接添加文本颜色
      this.mutableStyledString.setStyle({
        start: item.start,
        length: item.length,
        styledKey: StyledStringKey.FONT,
        styledValue: new TextStyle({ fontColor: '#9980ff' })
      })
    })

    this.textController.setStyledString(this.mutableStyledString);
  }

  build() {
    Column() {
      Text(undefined, { controller: this.textController }).key('mutableStyledString').fontSize(20)
        .margin(20)

      Divider().backgroundColor(Color.Gray)
      Row() {
        Text("不同意并退出")
          .dialogBtn()
        Text("同意")
          .dialogBtn()
          .borderRadius({ bottomRight: 15 })
      }.borderRadius(15)
    }
    .borderRadius(15)
    .width("100%")
  }
}

@Extend(Text)
function dialogBtn() {
  .layoutWeight(1)
  .textAlign(TextAlign.Center)
  .padding(20)
  .fontSize(18)
}

export interface urlRouter {
  start: number;
  length: number;
}

/**
 * 匹配字符串中所有《》包裹内容的起始位置和总长度
 * @param str - 待匹配的原始字符串
 * @returns 匹配结果数组，每个元素包含起始位置和长度信息
 */
function matchBracketContent(str: string): Array<urlRouter> {
  const result: Array<urlRouter> = [];
  const reg = /《[^》]+》/g;
  let match: RegExpExecArray | null;
  while ((match = reg.exec(str)) !== null) {
    const fullContent = match[0];
    const start = match.index;
    const length = fullContent.length;
    result.push({ start, length });
  }
  return result;
}

弹窗组件使用：

import { PrivacyDialog } from 'xx'

@Entry
@Component
struct Index {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: PrivacyDialog()
  })
  build() {
    Column() {
      Button("唤起隐私弹窗").onClick(()=>{
        this.dialogController.open()
      })
    }.justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

StyleOptions对象说明

StyledStringValue

相关文档：

• 【属性字符串】
• 【华为开发者生态隐私协议】
• 【华为开发者联盟网站使用条款】