Viedo组件
在手机、平板或是智慧屏这些终端设备上，媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集，还是视频的播放、切换、循环，亦或是相机的预览、拍照等功能，媒体组件都是必不可少的。以视频功能为例，在应用开发过程中，我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件，我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频，也包括查看我们存储在本地的视频内容。
构造函数
ts
复制代码
Video(value: {src?: string | Resource, currentProgressRate?: number | string |PlaybackSpeed, previewUri?: string |PixelMap | Resource, controller?: VideoController})
| 参数名 |
参数类型 |
是否必填 |
说明 |
| src |
string | Resource |
否 |
视频播放源的路径，可以是本地视频路径或网络路径，也可使用媒体库管理模块查询公共媒体库中的视频文件。 |
| currentProgressRate |
number |
否 |
视频播放倍速，支持0.75、1.0、1.25、1.75、2.0，默认值为1.0倍速。 |
| previewUri |
string | PixelMap8+ | Resource |
否 |
视频未播放时的预览图片路径或资源。 |
| controller |
VideoController |
否 |
视频控制器，用于控制视频播放等相关功能。 |
ts
复制代码
@Component
export default struct VideoPlayer {
private source: string | Resource;
private controller: VideoController;
build() {
Column() {
Video({
src: this.source,
controller: this.controller
})
}
}
}
组件属性
| 参数名 |
参数类型 |
是否必填 |
默认值 |
说明 |
| muted |
boolean |
否 |
false |
是否静音。 |
| autoPlay |
boolean |
否 |
false |
是否自动播放。 |
| controls |
boolean |
否 |
true |
控制视频播放的控制栏是否显示。 |
| objectFit |
ImageFit |
否 |
Cover |
设置视频显示模式（可选值：Contain、Cover、Auto、Fill、ScaleDown、None）。 |
| loop |
boolean |
否 |
false |
是否单个视频循环播放。 |
ts
复制代码
@Component
export default struct VideoPlayer {
private source: string | Resource;
private controller: VideoController;
build() {
Column() {
Video({
src: this.source,
controller: this.controller
})
.controls(false) //不显示控制栏
.autoPlay(false) // 手动点击播放
.loop(false) // 关闭循环播放
}
}
}
事件
| 事件处理函数 |
参数类型 |
说明 |
| onStart(event: () => void) |
无参数 |
播放时触发该事件，执行指定的回调函数。 |
| onPause(event: () => void) |
无参数 |
暂停时触发该事件，执行指定的回调函数。 |
| onFinish(event: () => void) |
无参数 |
播放结束时触发该事件，执行指定的回调函数。 |
| onError(event: () => void) |
无参数 |
播放失败时触发该事件，执行指定的回调函数。 |
| onPrepared(callback: (event?: { duration: number }) => void) |
event 可选参数：{ duration: number } |
视频准备完成时触发该事件，通过duration参数获取视频时长。 |
| onSeeking(callback: (event?: { time: number }) => void) |
event 可选参数：{ time: number } |
操作进度条过程中上报时间信息，单位为秒。 |
| onSeeked(callback: (event?: { time: number }) => void) |
event 可选参数：{ time: number } |
操作进度条完成后，上报播放时间信息，单位为秒。 |
| onUpdate(callback: (event?: { time: number }) => void) |
event 可选参数：{ time: number } |
播放进度变化时触发该事件，单位为秒，更新时间间隔为250毫秒。 |
| onFullscreenChange(callback: (event?: { fullscreen: boolean }) => void) |
event 可选参数：{ fullscreen: boolean } |
在全屏播放与非全屏播放状态之间切换时触发该事件。 |
Dialog组件
| 弹窗类型 |
简要说明 |
| 确认类弹窗 (AlertDialog) |
用于向用户显示警告或要求用户确认操作。用户必须做出选择或取消对话框，然后才能继续操作。 |
| 选择类弹窗 (TextPickerDialog, DatePickerDialog, TimePickerDialog) |
用于在用户需要选择文本、日期或时间时提供方便的选择界面。用户可以从预定义的选项中进行选择。 |
| 自定义弹窗 (CustomDialog) |
如果内置的弹窗类型不能满足您的需求，您可以创建自定义弹窗，以满足特定的业务需求。这允许您完全控制弹窗的布局和样式。 |
警告弹窗
ts
复制代码
Button('点击显示弹窗')
.onClick(() => {
AlertDialog.show(
{
title: '删除联系人', // 标题
message: '是否需要删除所选联系人?', // 内容
autoCancel: false, // 点击遮障层时，是否关闭弹窗。
alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式
offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量
primaryButton: {
value: '取消',
action: () => {
console.info('Callback when the first button is clicked');
}
},
secondaryButton: {
value: '删除',
fontColor: '#D94838',
action: () => {
console.info('Callback when the second button is clicked');
}
},
cancel: () => { // 点击遮障层关闭dialog时的回调
console.info('Closed callbacks');
}
}
)
})
以下是 AlertDialog 弹窗示例代码中的属性和它们的作用的表格说明：
| 属性 |
作用 |
| title |
弹窗标题，通常用于简洁地描述弹窗的目的或内容。 |
| message |
弹窗消息内容，通常用于提供更详细的信息或指导用户操作。 |
| autoCancel |
指定点击遮障层时，是否关闭弹窗，如果设置为 true，点击遮障层会关闭弹窗，否则不会。 |
| alignment |
弹窗在竖直方向的对齐方式，此处设置为 DialogAlignment.Bottom 表示弹窗出现在底部。 |
| offset |
弹窗相对于 alignment 位置的偏移量，这里的 { dx: 0, dy: -20 } 表示垂直偏移 -20 像素。 |
| primaryButton |
主要按钮配置，包括按钮文本和点击按钮时的回调函数。 |
| secondaryButton |
次要按钮配置，包括按钮文本、按钮字体颜色和点击按钮时的回调函数。 |
| cancel |
点击遮障层关闭弹窗时的回调函数，通常用于执行额外的关闭操作。 |
这个表格提供了示例代码中用到的属性和它们的作用。这些属性允许您自定义弹窗的外观和行为，以适应您的应用需求。如果需要更多信息或有其他问题，请随时提问。
文本选择弹窗
ts
复制代码
TextPickerDialog.show({
range: this.fruits, // 设置文本选择器的选择范围
selected: this.select, // 设置初始选中项的索引值。
onAccept: (value: TextPickerResult) => { // 点击弹窗中的"确定"按钮时触发该回调。
// 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
this.select = value.index;
console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));
},
onCancel: () => { // 点击弹窗中的"取消"按钮时触发该回调。
console.info("TextPickerDialog:onCancel()");
},
onChange: (value: TextPickerResult) => { // 滑动弹窗中的选择器使当前选中项改变时触发该回调。
console.info("TextPickerDialog:onChange()" + JSON.stringify(value));
}
})
})
| 配置选项 |
作用 |
range |
设置文本选择器的选择范围，即用户可以从中选择的选项列表。 |
selected |
设置初始选中项的索引值。这样可以确保弹窗显示时选中的是上一次确定的选项。 |
onAccept |
回调函数，当用户点击弹窗中的"确定"按钮时触发，允许执行相关操作。 |
onCancel |
回调函数，当用户点击弹窗中的"取消"按钮时触发，允许执行相关操作。 |
onChange |
回调函数，当用户在弹窗中的选择器上滑动以更改当前选中项时触发，允许执行相关操作。 |
日期选择框
ts
复制代码
DatePickerDialog.show({
start: new Date("1900-1-1"), // 设置选择器的起始日期
end: new Date("2023-12-31"), // 设置选择器的结束日期
selected: this.selectedDate, // 设置当前选中的日期
lunar: false,
onAccept: (value: DatePickerResult) => { // 点击弹窗中的"确定"按钮时触发该回调
// 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => { // 点击弹窗中的"取消"按钮时触发该回调
console.info("DatePickerDialog:onCancel()")
},
onChange: (value: DatePickerResult) => { // 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调
console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
| 配置选项 |
作用 |
start |
设置选择器的起始日期，用户可以从中选择。 |
end |
设置选择器的结束日期，用户可以从中选择。 |
selected |
设置当前选中的日期，以确保弹窗再次弹出时选中的是上一次确定的日期。 |
lunar |
布尔值，指示是否使用农历日期。 |
onAccept |
回调函数，当用户点击弹窗中的"确定"按钮时触发，允许执行相关操作。 |
onCancel |
回调函数，当用户点击弹窗中的"取消"按钮时触发，允许执行相关操作。 |
onChange |
回调函数，当用户在弹窗中的滑动选择器上滑动以更改当前选中日期时触发，允许执行相关操作。 |
自定义弹框
ts
复制代码
@CustomDialog
export default struct CustomDialogWidget {
@State hobbyBeans: HobbyBean[] = [];
@Link hobbies: string;
private controller: CustomDialogController;
aboutToAppear() {...}
setHobbiesValue(hobbyBeans: HobbyBean[]) {
let hobbiesText: string = '';
hobbiesText = hobbyBeans.filter((isCheckItem: HobbyBean) =>
isCheckItem?.isChecked)
.map((checkedItem: HobbyBean) => {
return checkedItem.label;
}).join(',');
this.hobbies = hobbiesText;
}
build() {
Column() {
Text($r('app.string.text_title_hobbies'))...
List() {
ForEach(this.hobbyBeans, (itemHobby: HobbyBean) => {
ListItem() {
Row() {
Text(itemHobby.label)...
Toggle({ type: ToggleType.Checkbox, isOn: false })...
.onChange((isCheck) => {
itemHobby.isChecked = isCheck;
})
}
}
}, itemHobby => itemHobby.label)
}
Row() {
Button($r("app.string.cancel_button"))...
.onClick(() => {
this.controller.close();
})
Button($r("app.string.definite_button"))...
.onClick(() => {
this.setHobbiesValue(this.hobbyBeans);
this.controller.close();
})
}
}
}
}
customDialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogWidget({
onConfirm: this.setHobbiesValue.bind(this),
}),
alignment: DialogAlignment.Bottom,
customStyle: true,
offset: { dx: 0,dy: -20 }
});
| 步骤 |
说明 |
| 1. 创建自定义弹窗组件 |
创建一个新的组件，标识为自定义弹窗组件。 |
| 2. 定义组件外观和行为 |
在弹窗组件中定义弹窗的外观、布局和行为，包括按钮、回调。 |
| 3. 创建弹窗控制器 |
创建一个弹窗控制器，用于管理弹窗的显示和关闭。 |
| 4. 配置弹窗控制器 |
在弹窗控制器中配置弹窗的外观和样式，如位置、大小等。 |
| 5. 显示弹窗 |
使用控制器的方法显示自定义弹窗，通常通过 show 方法触发。 |
| 6. 处理用户操作 |
在弹窗组件中定义回调函数，用于处理用户的操作，例如按钮点击。 |
| 7. 关闭弹窗 |
在弹窗组件中使用控制器的方法关闭弹窗，通常通过 close 方法。 |
| 8. 完成和测试 |
确保自定义弹窗按预期工作，进行测试，确保一切正常。 |