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