输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心
全部文档版本说明工具设计指南与API参考开发与测试上架分发与运营问题处理与运维最佳实践行业解决方案
指南与API参考
指南
API
高级筛选
API version全部版本
设备全部
元服务API集不筛选
您当前正在浏览HarmonyOS最新文档，覆盖已发布的所有API版本，可在API参考中筛选您使用的API版本。详细的版本配套关系请参考版本说明。
指南与API参考API参考AISpeech Kit（场景化语音服务）ArkTS组件TextReaderIconV2（朗读听筒图标）

TextReaderIconV2（朗读听筒图标）

更新时间: 2026-09-01 03:59
复制页面
本文导读

朗读听筒图标，可以作为动态组件加载，并配置成为播放面板的主入口。

在应用使用ArkTS的状态管理V1装饰器时，需要通过TextReaderIcon组件接口拉起朗读听筒图标；在应用使用状态管理V2装饰器时，需要通过TextReaderIconV2组件接口拉起朗读听筒图标。

起始版本： 6.1.1(24)

导入模块

收起
自动换行
深色代码主题
复制
  1. import { TextReaderIconV2, UpReadState } from '@kit.SpeechKit';

UpReadState

type UpReadState = (readState:ReadStateCode)=>void

用于听筒图标组件触发父组件状态更新的回调函数。

元服务API： 从版本6.1.1(24)开始，该接口支持在元服务中使用。

系统能力： SystemCapability.AI.Component.TextReader

模型约束： 此接口仅可在Stage模型下使用。

起始版本： 6.1.1(24)

参数：

展开
名称 类型 必填 说明
readState ReadStateCode 是 播报状态。

TextReaderIconV2

朗读听筒图标，可以作为动态组件加载。设置onClick回调，在用户点击听筒图标时启动朗读控件。

装饰器类型： @ComponentV2

元服务API： 从版本6.1.1(24)开始，该接口支持在元服务中使用。

系统能力： SystemCapability.AI.Component.TextReader

模型约束： 此接口仅可在Stage模型下使用。

起始版本： 6.1.1(24)

参数：

展开
名称 类型 必填 装饰器类型 说明
readState ReadStateCode 是 @Param

播报状态。

说明：

readState使用@Param装饰器：父子单向同步。
upReadState UpReadState 是 @Event

回调函数，更新播报状态。

说明：

upReadState使用@Event装饰器：子组件通过回调函数触发父组件状态更新。

build

build(): void

用于创建TextReaderIconV2对象的构造函数。

元服务API： 从版本6.1.1(24)开始，该接口支持在元服务中使用。

系统能力： SystemCapability.AI.Component.TextReader

模型约束： 此接口仅可在Stage模型下使用。

起始版本： 6.1.1(24)

示例：

收起
自动换行
深色代码主题
复制
  1. import  {TextReader,ReadStateCode,TextReaderIconV2, UpReadState} from '@kit.SpeechKit'
  2. 

  3. @Entry
  4. @ComponentV2
  5. struct Index {
  6. 

  7.   /**
  8.    * 待加载的文章
  9.    */
  10.   @Local readInfoList: TextReader.ReadInfo[] = [];
  11.   @Local selectedReadInfo: TextReader.ReadInfo = this.readInfoList[0];
  12. 

  13.   /**
  14.    * 播放状态
  15.    */
  16.   @Local readState: ReadStateCode = ReadStateCode.WAITING;
  17. 

  18.   /**
  19.    * 初始化状态
  20.    */
  21.   @Local isInit: boolean = false;
  22. 

  23.   async aboutToAppear(){
  24.     /**
  25.      * 加载数据
  26.      */
  27.     let readInfoList: TextReader.ReadInfo[] = [{
  28.       id: '001',
  29.       title: {
  30.         text:'水调歌头.明月几时有',
  31.         isClickable:true
  32.       },
  33.       author:{
  34.         text:'宋.苏轼',
  35.         isClickable:true
  36.       },
  37.       date: {
  38.         text:'2024/01/01',
  39.         isClickable:false
  40.       },
  41.       bodyInfo: '明月几时有？把酒问青天。'
  42.     }];
  43.     this.readInfoList = readInfoList;
  44.     this.selectedReadInfo = this.readInfoList[0];
  45.     await this.init();
  46.   }
  47. 

  48.   /**
  49.    * 初始化
  50.    */
  51.   async init() {
  52.     const readerParam: TextReader.ReaderParam = {
  53.       isVoiceBrandVisible: true,
  54.       businessBrandInfo: {
  55.         panelName: '小艺朗读',
  56.         panelIcon: $r('app.media.startIcon')
  57.       }
  58.     };
  59.     try {
  60.       let context: Context | undefined = this.getUIContext().getHostContext()
  61.       if (context) {
  62.         await TextReader.init(context, readerParam);
  63.         this.isInit = true;
  64.       }
  65.     } catch (err) {
  66.       console.error(`TextReader failed to init. Code: ${err.code}, message: ${err.message}`);
  67.     }
  68.   }
  69. 

  70.   // 设置操作监听
  71.   setActionListener() {
  72.     TextReader.on('stateChange', (state: TextReader.ReadState) => {
  73.       this.onStateChanged(state);
  74.     });
  75.        TextReader.on('requestMore', () => {
  76.       TextReader.loadMore([], true);
  77.     });
  78.   }
  79. 

  80.   onStateChanged = (state: TextReader.ReadState) => {
  81.     if (this.selectedReadInfo?.id === state.id) {
  82.       this.readState = state.state;
  83.     } else {
  84.       this.readState = ReadStateCode.WAITING;
  85.     }
  86.   };
  87.   
  88.   updateReadState: UpReadState = (readState: ReadStateCode) => {
  89.     this.readState = readState
  90.     console.info(`TextReader new readState:${readState}`)
  91.   }
  92. 

  93.   build() {
  94.     Column() {
  95.       TextReaderIconV2({ readState: this.readState,upReadState:this.updateReadState})
  96.         .margin({ right: 20 })
  97.         .width(32)
  98.         .height(32)
  99.         .onClick(async () => {
  100.           try {
  101.             this.setActionListener();
  102.             await TextReader.start(this.readInfoList, this.selectedReadInfo?.id);
  103.           } catch (err) {
  104.             console.error(`TextReader failed to start. Code: ${err.code}, message: ${err.message}`);
  105.           }
  106.         })
  107.     }
  108.     .height('100%')
  109.   }
  110. }

组件如下图：

静止状态

播放状态

TextReaderIcon（朗读听筒图标）
AICaptionComponent（AI字幕组件）
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明