简介

该文主要提供文件拖拽的场景及最佳实践示例。

开发环境

DevEco Studio： DevEco Studio NEXT Release（Build Version： 5.0.3.900）

系统： OpenHarmony 5.0.0.71

设备： DAYU200（rk3568）

最佳实践示例

以Video为例：

import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData';
import { fileIo, fileUri } from '@kit.CoreFileKit';

@Entry
@Component
struct DragTest6 {
  @State context: Context = getContext(this);
  @State videoWidth: number = 200;
  @State videoHeight: number = 200;
  @State innerResource: Resource | string | null = null;
  @State originalResource: string = '';
  private controller: VideoController | undefined;

  build() {
    NavDestination() {
      Column() {
        Column() {
          // 文件拖出
          Column() {
            Text('原视频').fontSize(12).fontColor(0xCCCCCC).width('100%').padding({ left: 20 })
            Video({ src: $rawfile('video1.mp4'), controller: this.controller })
              .width(200)
              .height(200)
              .autoPlay(true)
              .loop(true)
              .draggable(true)
              .border({ radius: 8 })
                // 长按之后，将视频文件拷贝到沙箱路径
              .parallelGesture(
                LongPressGesture({ repeat: false })
                  .onAction((event: GestureEvent) => {
                    this.context.resourceManager.getRawFd('video1.mp4', (err, data) => {
                      let filePath = this.context.filesDir + '/video1.mp4';
                      console.log('压缩文件路径：' + filePath);
                      let dest = fileIo.openSync(filePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);
                      let bufsize = 4096;
                      let buf = new ArrayBuffer(bufsize);
                      let off = 0, len = 0, readedLen = 0;
                      // 通过buffer将rawfile文件内容copy到沙箱路径
                      while (len = fileIo.readSync(data.fd, buf, { offset: data.offset + off, length: bufsize })) {
                        readedLen += len;
                        fileIo.writeSync(dest.fd, buf, { offset: off, length: len });
                        off = off + len;
                        if ((data.length - readedLen) < bufsize) {
                          bufsize = data.length - readedLen;
                        }
                      }
                      fileIo.close(dest.fd);
                      this.context.resourceManager.closeRawFd('video1.mp4');
                      this.originalResource = fileUri.getUriFromPath(filePath);
                      console.log('originalResource：' + this.originalResource);
                    })
                  })
              )
              .onDragStart((event: DragEvent) => {
                let video = new unifiedDataChannel.Video();
                video.videoUri = this.originalResource;
                let unifiedData = new unifiedDataChannel.UnifiedData(video);
                event.setData(unifiedData);
              })
          }

          Column() {
            Text('视频拖拽落入框').fontSize(12).fontColor(0xCCCCCC).width('100%').padding({ left: 20 })
            Video({ src: this.innerResource, controller: this.controller })
              .width(200)
              .height(200)
              .border({ radius: 8 })
              .width(this.videoWidth)
              .height(this.videoWidth)
              .visibility(this.innerResource === null ? Visibility.Hidden : Visibility.Visible)
              .autoPlay(true)
              .loop(true)
          }
          .allowDrop([uniformTypeDescriptor.UniformDataType.VIDEO])
          // 文件拖入
          .onDrop(async (event: DragEvent) => {
            let dragData = event.getData();
            if (dragData != undefined) {
              let records = dragData.getRecords();
              let type = records[0].getType();
              switch (type) {
                case uniformTypeDescriptor.UniformDataType.VIDEO:
                  let record: unifiedDataChannel.Video = (records[0]) as unifiedDataChannel.Video;
                  this.innerResource = record.videoUri;
                  break;
                default:
                  return;
              }
              event.setResult(0)
            }
          })
          .width(300)
          .height(300)
          .border({ width: 1, radius: 5, style: BorderStyle.Dashed })
        }.justifyContent(FlexAlign.SpaceBetween)
        .layoutWeight(1)
        .margin({ bottom: 10 })
      }.width('100%').height('100%')
    }
    .title('资源视频video拖拽示例')
  }
}