1# @ohos.multimedia.avCastPicker (投播组件) 2<!--Kit: AVSession Kit--> 3<!--Subsystem: Multimedia--> 4<!--Owner: @ccfriend; @liao_qian--> 5<!--Designer: @ccfriend--> 6<!--Tester: @chenmingxi1_huawei--> 7<!--Adviser: @zengyawen--> 8 9本模块提供创建投播组件AVCastPicker的功能，提供设备发现连接的统一入口。 10 11> **说明：** 12> 13> - 本模块首批接口从API version 10开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 14> - **设备限制：** 当前功能不支持在PC/2in1设备上使用。 15> - 示例效果请以真机为准，当前DevEco Studio预览器无实际投播功能。<!--Del--> 16> - 当前组件的使用，依赖于设备支持“设备选择界面”。当前暂无OpenHarmony设备支持，需要OEM厂商实现具体的“设备选择界面”。<!--DelEnd--> 17 18## 导入模块 19 20```js 21import { AVCastPicker } from '@kit.AVSessionKit'; 22``` 23 24## 属性 25 26支持[通用属性](../apis-arkui/arkui-ts/ts-component-general-attributes.md)。 27 28## AVCastPicker 29 30``` 31AVCastPicker({ 32 normalColor?: Color | number | string; 33 activeColor?: Color | number | string; 34 pickerStyle?: AVCastPickerStyle; 35 colorMode?: AVCastPickerColorMode; 36 sessionType?: string; 37 customPicker?: CustomBuilder; 38 onStateChange?: (state: AVCastPickerState) => void; 39}) 40``` 41 42投播组件，可用于将音视频资源投放到其它设备播放。 43 44该组件为自定义组件，开发者在使用前需要先了解[@Component](../../ui/state-management/arkts-create-custom-components.md#component)。 45 46**装饰器类型：** [@Component](../../ui/state-management/arkts-create-custom-components.md) 47 48**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 49 50**系统能力：** SystemCapability.Multimedia.AVSession.AVCast 51 52| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 53| -------- | -------- | -------- | -------- | -------- | 54| normalColor<sup>11+</sup> | Color | number | string | 否 | @Prop | 指正常状态下投播组件的颜色。<br>未设置将采用colorMode下的颜色设置。 | 55| activeColor<sup>11+</sup> | Color | number | string | 否 | @Prop | 指设备切换成功状态下投播组件的颜色。未设置系统将优先根据normalColor的颜色匹配；如果normalColor也未设置，将采用colorMode下的颜色设置。 | 56| pickerStyle<sup>12+</sup> | [AVCastPickerStyle](js-apis-avCastPickerParam.md#avcastpickerstyle12) | 否 | @Prop | 投播样式。<br>- 当sessionType是audio或者video时，默认值为STYLE_PANEL；<br>- 当sessionType是voice_call或者video_call时，默认值为STYLE_MENU，且不可修改为STYLE_PANEL。| 57| colorMode<sup>12+</sup> | [AVCastPickerColorMode](js-apis-avCastPickerParam.md#avcastpickercolormode12) | 否 | @Prop | 显示模式。默认值为AUTO。<br>- 当colorMode设置为AUTO时，跟随系统的深浅色模式的默认色值；<br>- 当colorMode设置为DARK、LIGHT时，使用对应模式的系统预定色值。 | 58| sessionType<sup>12+</sup> | string | 否| @Prop | 会话类型，可参考[AVSessionType](arkts-apis-avsession-t.md#avsessiontype10)。默认值为当前应用创建的AVSessionType。 | 59| customPicker<sup>12+</sup> | [CustomBuilder](../apis-arkui/arkui-ts/ts-types.md#custombuilder8) | 否 | @Prop | 自定义样式。建议应用自定义组件样式，可有效提升组件显示速度。 | 60| onStateChange<sup>11+</sup> | (state: [AVCastPickerState](js-apis-avCastPickerParam.md)) => void | 否 | - | 投播状态更改回调。 | 61 62## 事件 63 64支持[通用事件](../apis-arkui/arkui-ts/ts-component-general-events.md)。 65 66## 示例 67 68投播功能的示例说明参考如下。 69<!--RP1--><!--RP1End--> 70 71```ts 72import { AVCastPickerState, AVCastPicker } from '@kit.AVSessionKit'; 73 74@Entry 75@Component 76struct Index { 77 78 @State pickerImage: ResourceStr = $r('app.media.castPicker'); // 自定义资源。 79 80 private onStateChange(state: AVCastPickerState) { 81 if (state == AVCastPickerState.STATE_APPEARING) { 82 console.log('The picker starts showing.'); 83 } else if (state == AVCastPickerState.STATE_DISAPPEARING) { 84 console.log('The picker finishes presenting.'); 85 } 86 } 87 88 @Builder 89 customPickerBuilder(): void { 90 Image(this.pickerImage) 91 .width('100%') 92 .height('100%') 93 .fillColor(Color.Black) 94 } 95 96 build() { 97 Row() { 98 Column() { 99 AVCastPicker({ 100 normalColor: Color.Red, 101 customPicker: () => this.customPickerBuilder(), 102 onStateChange: this.onStateChange 103 }) 104 .width('40vp') 105 .height('40vp') 106 .border({ width: 1, color: Color.Red }) 107 }.height('50%') 108 }.width('50%') 109 } 110} 111``` 112