鸿蒙开发之ArkUI组件常用组件-CustomDialog/Video

CustomDialog

自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。我们可以通过CustomDialogController类显示自定义弹窗。

创建自定义弹窗

使用@CustomDialog装饰器装饰自定义弹窗
@CustomDialog装饰器用于装饰自定义弹窗，此装饰器内进行自定义内容

@CustomDialog
struct CustomDialogDemo {
  controller:CustomDialogController
  build() {
    Column() {
      Text("这是弹窗")
        .fontSize(20)
        .margin({top:20,bottom:10})
      Text("这是自定义弹窗的内容。。。。")
        .fontSize(16)
        .margin({top:10,bottom:30})
    }
  }
}

创建构造器，与装饰器呼应相连

 dialogController:CustomDialogController = new CustomDialogController({
    builder:CustomDialogDemo({})
  })

点击与onClick事件绑定的组件使弹窗弹出

 Row() {
      Flex({justifyContent:FlexAlign.Center}){
        Button('显示弹窗')
          .onClick(() => {
            this.dialogController.open()
          })
      }.width('100%').position({x:0,y:200})
    }

显示的效果是：

弹窗交互

弹窗可用于数据交互，完成用户一系列响应操作。

假设有个删除记录的按钮，点击后有弹窗提示

在@CustomDialog装饰器内添加按钮操作，同时添加数据函数的创建

@CustomDialog
struct CustomDialogDemo {
  controller:CustomDialogController
  cancel:() => void //取消的回调
  confirm:() => void //确认的回调
  build() {
    Column() {
      Text("温馨提示")
        .fontSize(20)
        .margin({top:20,bottom:10})
      Text("确认要删除吗？删除的话，无法恢复的哟")
        .fontSize(16)
        .margin({top:10,bottom:20})
      Row() {
        Button('取消').onClick(() => {
          this.controller.close() //关闭弹窗
          this.cancel() //回调取消
        }).backgroundColor(0xffffff)
          .fontColor(Color.Gray)
          .width('50%')
        Button('确定').onClick(()=> {
          this.controller.close()
          this.confirm()
        }).backgroundColor(0xffffff)
          .fontColor(Color.Red)
          .width('50%')
      }.margin({bottom:20})
    }
  }
}

页面内需要在构造器内进行接收，同时创建相应的函数操作。

dialogController:CustomDialogController = new CustomDialogController({
    builder:CustomDialogDemo({
      cancel:this.cancelAction,
      confirm:this.confirmAction,
    }),
    alignment:DialogAlignment.Center //可设置dialog对齐方式，设定底部或中间
  })

 cancelAction() {
    console.log("点击了取消！！")
  }
  confirmAction() {
    console.log("点击了确认删除")
  }

效果

Video

Video组件用于播放视频文件并控制其播放状态，常用于为短视频应用和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。

创建视频组件

Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})

该接口用于创建视频播放组件。其中，src指定视频播放源的路径，加载方式请参考加载视频资源，currentProgressRate用于设置视频播放倍速，previewUri指定视频未播放时的预览图片路径，controller设置视频控制器，用于自定义控制视频。

倍速枚举值

加载视频资源

Video组件支持加载本地视频和网络视频。

1.加载本地视频

加载普通视频

加载本地视频时，首先在本地rawfile目录指定对应的文件，如下图所示。

使用资源访问符$rawfile()引用视频资源

@Entry
@Component
struct VideoPage {
  @State message: string = 'Hello World'
  private controller:VideoController
  private previewUril:Resource = $r('app.media.preview')
  private  videoRes:Resource = $rawfile('test.mp4')
  build() {
    Row() {
      Column() {
       Video({
         src:this.videoRes,
         previewUri:this.previewUril,
         controller:this.controller
       }).height('30%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

Data Ability提供的视频路径带有dataability://前缀，使用时确保对应视频资源存在即可。

2.加载沙箱路径视频

支持file:///data/storage路径前缀的字符串，用于读取应用沙箱路径内的资源。需要保证应用沙箱目录路径下的文件存在并且有可读权限。

3.加载网络视频

加载网络视频时，需要申请权限ohos.permission.INTERNET，具体申请方式请参考权限申请声明。此时，Video的src属性为网络视频的链接。

属性

Video组件属性主要用于设置视频的播放形式。例如设置视频播放是否静音、播放时是否显示控制条等。

事件

@Entry
@Component
struct VideoPlayer{
  private controller:VideoController;
  private previewUris: Resource = $r ('app.media.preview');
  private innerResource: Resource = $rawfile('videoTest.mp4');
  build(){
    Column() {
      Video({
        src: this.innerResource,
        previewUri: this.previewUris,
        controller: this.controller
      })
        .onUpdate((event) => {   //更新事件回调
          console.info("Video update.");
        })
        .onPrepared((event) => {  //准备事件回调
          console.info("Video prepared.");
        })
        .onError(() => {          //失败事件回调
          console.info("Video error.");
        })
    }
  }
}

VideoController的使用

Video控制器主要用于控制视频的状态，包括播放、暂停、停止以及设置进度等，详细的使用请参考VideoController使用说明。

默认的控制器支持视频的开始、暂停、进度调整、全屏显示四项基本功能。

自定义控制器

使用自定义的控制器，先将默认控制器关闭掉，之后可以使用button以及slider等组件进行自定义的控制与显示，适合自定义较强的场景下使用。

@Entry
@Component
struct VideoPage {
  @State message: string = 'Hello World'
  private previewUril:Resource = $r('app.media.preview')
  private  videoRes:Resource = $rawfile('test.mp4')
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  @State isAutoPlay: boolean = false
  @State showControls: boolean = true
  @State sliderStartTime: string = '';
  @State currentTime: number = 0;
  @State durationTime: number = 0;
  @State durationStringTime: string ='';
  controller: VideoController = new VideoController()
  build() {
    Row() {
      Column() {
       Video({
         src:this.videoRes,
         previewUri:this.previewUril,
         controller:this.controller,
         currentProgressRate: this.curRate,
       }).controls(false).autoPlay(true) //关闭默认控制器
         .onPrepared((event)=>{
           this.durationTime = event.duration
         })
         .onUpdate((event)=>{
           this.currentTime =event.time
         })
         .height('30%')
        Row() {
          Text(JSON.stringify(this.currentTime) + 's').padding({left:5})
          Slider({
            value: this.currentTime,
            min: 0,
            max: this.durationTime
          })
            .onChange((value: number, mode: SliderChangeMode) => {
              this.controller.setCurrentTime(value);
            }).width("85%")
          Text(JSON.stringify(this.durationTime) + 's').margin({right:5})
        }
        .opacity(0.9)
        .width("100%")
      }
      .width('100%')
    }
    .height('100%')
  }
}