网页安全站点设置,wordpress显示同一分类的文章,企业网站样式,谷歌seo营销Viedo组件
在手机、平板或是智慧屏这些终端设备上#xff0c;媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集#xff0c;还是视频的播放、切换、循环#xff0c;亦或是相机的预览、拍照等功能#xff0c;媒体组件都是必不可少的。以视频功能为…Viedo组件
在手机、平板或是智慧屏这些终端设备上媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集还是视频的播放、切换、循环亦或是相机的预览、拍照等功能媒体组件都是必不可少的。以视频功能为例在应用开发过程中我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频也包括查看我们存储在本地的视频内容。
构造函数
Video(value: {src?: string | Resource, currentProgressRate?: number | string |PlaybackSpeed, previewUri?: string |PixelMap | Resource, controller?: VideoController})参数名参数类型是否必填说明srcstring | Resource否视频播放源的路径可以是本地视频路径或网络路径也可使用媒体库管理模块查询公共媒体库中的视频文件。currentProgressRatenumber否视频播放倍速支持0.75、1.0、1.25、1.75、2.0默认值为1.0倍速。previewUristring | PixelMap8 | Resource否视频未播放时的预览图片路径或资源。controllerVideoController否视频控制器用于控制视频播放等相关功能。
Component
export default struct VideoPlayer {private source: string | Resource;private controller: VideoController;build() {Column() {Video({src: this.source,controller: this.controller})}}
}组件属性
参数名参数类型是否必填默认值说明mutedboolean否false是否静音。autoPlayboolean否false是否自动播放。controlsboolean否true控制视频播放的控制栏是否显示。objectFitImageFit否Cover设置视频显示模式可选值Contain、Cover、Auto、Fill、ScaleDown、None。loopboolean否false是否单个视频循环播放。
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)如果内置的弹窗类型不能满足您的需求您可以创建自定义弹窗以满足特定的业务需求。这允许您完全控制弹窗的布局和样式。
警告弹窗
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点击遮障层关闭弹窗时的回调函数通常用于执行额外的关闭操作。
这个表格提供了示例代码中用到的属性和它们的作用。这些属性允许您自定义弹窗的外观和行为以适应您的应用需求。如果需要更多信息或有其他问题请随时提问。
文本选择弹窗
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回调函数当用户在弹窗中的选择器上滑动以更改当前选中项时触发允许执行相关操作。
日期选择框
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回调函数当用户在弹窗中的滑动选择器上滑动以更改当前选中日期时触发允许执行相关操作。
自定义弹框
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. 完成和测试确保自定义弹窗按预期工作进行测试确保一切正常。
