HarmonyOS 鸿蒙Next中TextReaderIcon的参数是否有V2版本装饰器

HarmonyOS 鸿蒙Next中TextReaderIcon的参数是否有V2版本装饰器 最近在使用 TextReaderIcon 组件时使用了V1版本的状态管理,现在需要将V1迁移到V2,但 TextReaderIcon 组件的参数 readState:ReadStateCode 的装饰器类型是V1版本的@Link,我需要传入的参数是由@Param装饰的,这导致无法兼容,部分代码如下:

@ComponentV2
export struct ArticleItemCard {

  [@Param](/user/Param)  readState:ReadStateCode = ReadStateCode.WAITING;
  .....

  build(){
    Row(){

      ....

      TextReaderIcon({ readState: this.readState })

      ......
    }
  }

  .....

  }

  // TextReaderIcon上出现错误:A V2 component cannot be used with any member property decorated by '[@Link](/user/Link)' in a V1 component.

那么:

  1. TextReaderIcon 组件有没有V2版本?我暂时没找到;

  2. 如果没有V2版本,在这里有没有什么办法混用V1和V2版本?

麻烦了解的同学指导一下,先行谢过!


更多关于HarmonyOS 鸿蒙Next中TextReaderIcon的参数是否有V2版本装饰器的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

开发者您好,

  1. TextReaderIcon 目前没有V2版本。如果您还是想要TextReaderIcon支持V2版本,麻烦您提供如下信息:

    请问您是在什么样的业务场景中使用该能力,交互流程是怎样的,在哪一个环节遇到了问题?方便说明能力不满足可能带来的影响:什么时间用到?是否高频?有无三方库可以做到?若提供该能力,是否会造成大工作量返工?请您注意提供的内容不要包含您或第三方的非公开信息,如给您带来不便,敬请谅解。

  2. 如果想要实现混用V1和V2,具体您可以参考: 状态管理V1和V2混用场景-状态管理V1-V2迁移指导-学习UI范式状态管理-UI开发 (ArkTS声明式开发范式)-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者

示例代码如下:

import { TextReader, TextReaderIcon, ReadStateCode } from '@kit.SpeechKit';


@Entry
@ComponentV2
struct Index {

  /**
   * 待加载的文章
   */
  @Local readInfoList: TextReader.ReadInfo[] = [];
  @Local selectedReadInfo: TextReader.ReadInfo = this.readInfoList[0];

  /**
   * 播放状态
   */
  @Param readState: ReadStateCode = ReadStateCode.WAITING;


  build() {
    Column() {
      child({
        readState:this.readState
      }).width(100)
    }
    .height('100%')
  }
}

@Component
struct child{
  /**
   * 待加载的文章
   */
  @State readInfoList: TextReader.ReadInfo[] = [];
  @State selectedReadInfo: TextReader.ReadInfo = this.readInfoList[0];

  /**
   * 播放状态
   */
  @State readState: ReadStateCode = ReadStateCode.WAITING;

  /**
   * 用于显示当前页的按钮状态
   */
  @State isInit: boolean = false;

  async aboutToAppear(){
    /**
     * 加载数据
     */
    let readInfoList: TextReader.ReadInfo[] = [{
      id: '001',
      title: {
        text:'水调歌头.明月几时有',
        isClickable:true
      },
      author:{
        text:'宋.苏轼',
        isClickable:true
      },
      date: {
        text:'2024/01/01',
        isClickable:false
      },
      bodyInfo: '明月几时有?把酒问青天。'
    }];
    this.readInfoList = readInfoList;
    this.selectedReadInfo = this.readInfoList[0];
    this.init();
  }

  /**
   * 初始化
   */
  async init() {
    const readerParam: TextReader.ReaderParam = {
      isVoiceBrandVisible: true,
      businessBrandInfo: {
        panelName: '小艺朗读',
        panelIcon: $r('app.media.startIcon')
      }
    }
    try {
      let context: Context | undefined = this.getUIContext().getHostContext()
      if (context) {
        await TextReader.init(context, readerParam);
        this.isInit = true;
      }
    } catch (err) {
      console.error(`TextReader failed to init. Code: ${err.code}, message: ${err.message}`);
    }
  }

  // 设置操作监听
  setActionListener() {
    TextReader.on('stateChange', (state: TextReader.ReadState) => {
      this.onStateChanged(state)
    });
    TextReader.on('requestMore', () => this.onStateChanged);
  }

  onStateChanged = (state: TextReader.ReadState) => {
    if (this.selectedReadInfo?.id === state.id) {
      this.readState = state.state;
    } else {
      this.readState = ReadStateCode.WAITING;
    }
  }
  build(){
    TextReaderIcon({ readState: this.readState })
      .margin({ right: 20 })
      .width(32)
      .height(32)
      .onClick(async () => {
        try {
          this.setActionListener();
          await TextReader.start(this.readInfoList, this.selectedReadInfo?.id);
        } catch (err) {
          console.error(`TextReader failed to start. Code: ${err.code}, message: ${err.message}`);
        }
      })
  }
}

更多关于HarmonyOS 鸿蒙Next中TextReaderIcon的参数是否有V2版本装饰器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢,非必须需求,己经用其他方䅁替代,

HarmonyOS Next中TextReaderIcon目前没有V2版本装饰器。该组件的参数主要基于当前API设计,用于控制图标样式和交互状态。开发者应查阅最新的官方SDK文档或API参考,以获取最准确的参数列表和可用装饰器信息。

根据你的代码和问题,TextReaderIcon 组件目前确实没有提供 V2 版本。这是一个已知的 V1 组件,其 readState 参数使用了 @Link 装饰器,因此无法直接接收来自 V2 组件 @Param 装饰的变量。

关于你的两个问题:

  1. TextReaderIcon 是否有 V2 版本? 目前,HarmonyOS SDK 中提供的 TextReaderIcon 组件只有 V1 版本。在官方文档和 API 参考中,尚未发布其 V2 版本。

  2. 如何实现 V1 与 V2 的混用? 由于 @Link@Param 的机制不兼容,直接传递会报错。可行的解决方案是在 V2 组件内部创建一个 V1 兼容的状态变量作为“桥梁”

解决方案示例:

在你的 ArticleItemCard (V2) 组件中,可以这样做:

@ComponentV2
export struct ArticleItemCard {
  // 1. 保留原来的 @Param 参数
  @Param readStateParam: ReadStateCode = ReadStateCode.WAITING;

  // 2. 内部声明一个 @State 变量(V1装饰器),用于同步值并传递给V1组件
  @State bridgeReadState: ReadStateCode = this.readStateParam;

  // 3. 使用 aboutToAppear 或 aboutToUpdate 来同步参数到内部状态
  aboutToUpdate() {
    // 当父组件传入的 readStateParam 变化时,更新内部 bridgeReadState
    this.bridgeReadState = this.readStateParam;
  }

  build() {
    Row() {
      // 4. 将内部状态 bridgeReadState 传递给 TextReaderIcon
      TextReaderIcon({ readState: this.bridgeReadState })
    }
  }
}

核心原理:

  • @State 是 V1 的装饰器,与 V1 组件的 @Link 要求兼容。
  • bridgeReadState 作为一个中间状态,接收来自 @Param 的值。
  • 通过生命周期回调(如 aboutToUpdate)确保当外部参数变化时,内部桥接状态同步更新,从而驱动 TextReaderIcon 正确响应。

注意事项:

  • 此方法会创建一个额外的状态变量,并增加一次数据同步。
  • 如果 readState 需要从 TextReaderIcon 内部修改并向上传递(即双向同步),此方案将无法满足,因为 @State 是单向的。目前,如果 TextReaderIcon 要求 @Link,通常意味着它可能需要双向绑定,而上述方案仅支持父到子的单向同步。你需要确认 TextReaderIcon 的使用场景是否仅为读取状态。

当前阶段,在 V2 组件中使用尚未升级的 V1 组件,这是一种常见的兼容性处理方式。建议关注后续 SDK 更新,以获取官方的 V2 版本组件。

回到顶部