输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS 5.0.2(14)

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
API参考
高级筛选
Created with Pixso.
元服务API集不筛选
您当前浏览的HarmonyOS 5.0.2(API 14)文档归档不再维护，推荐您使用最新版本。详细请参考文档维护策略变更。
API参考应用框架ArkUI（方舟UI框架）ArkTS组件组件通用信息通用属性拖拽控制

拖拽控制

更新时间: 2025-03-17 00:56
本文导读
展开章节

设置组件是否可以响应拖拽事件。

说明

从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

ArkUI框架对以下组件实现了默认的拖拽能力，支持对数据的拖出或拖入响应。开发者也可以通过实现通用拖拽事件来自定义拖拽响应。

Text、TextInput、TextArea、Hyperlink、Image、RichEditor和Web组件的draggable属性默认为true，默认支持拖出能力。其他组件需要开发者将draggable属性设置为true，并在onDragStart等接口中实现数据传输相关内容，才能正确处理拖拽。

说明

Text组件需配合copyOption一起使用，设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice。

allowDrop

allowDrop(value: Array<UniformDataType> | null)

设置该组件上允许落入的数据类型。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
value Array<UniformDataType> | null12+ 是

设置该组件上允许落入的数据类型。从API version 12开始，允许设置成null使该组件不接受所有的数据类型。

默认值：空

draggable

draggable(value: boolean)

设置该组件是否允许进行拖拽。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
value boolean 是

设置该组件是否允许进行拖拽。

默认值：false

dragPreview11+

dragPreview(value: CustomBuilder | DragItemInfo | string)

设置组件拖拽过程中的预览图。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
value CustomBuilder | DragItemInfo | string12+ 是

设置组件拖拽过程中的预览图，仅在onDragStart拖拽方式中有效。

当组件支持拖拽并同时设置bindContextMenu的预览图时，则长按浮起的预览图以bindContextMenu设置的预览图为准。开发者在onDragStart中返回的背板图优先级低于dragPreview设置的预览图，当设置了dragPreview预览图时，拖拽过程中的背板图使用dragPreview预览图。由于CustomBuilder需要离线渲染之后才能使用，因此存在一定的性能开销和时延，推荐优先使用 DragItemInfo中的PixelMap方式。

当传入类型为string的id时，则将id对应组件的截图作为预览图。如果id对应的组件无法查找到，或者id对应的组件Visibility属性设置成none/hidden，则对组件自身进行截图作为拖拽预览图。目前截图不含有亮度、阴影、模糊和旋转等视觉效果。

默认值：空

dragPreviewOptions11+

dragPreviewOptions(value: DragPreviewOptions, options?: DragInteractionOptions)

设置拖拽过程中背板图处理模式及数量角标的显示。不支持onItemDragStart拖拽方式。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
value DragPreviewOptions11+ 是

设置拖拽过程中背板图处理模式及数量角标的显示。

默认值：空
options12+ DragInteractionOptions12+ 否

设置拖拽过程中背板图浮起的交互模式。

默认值：空

DragPreviewOptions11+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

展开
名称 类型 必填 描述
mode DragPreviewMode | Array<DragPreviewMode>12+ 否

表示拖拽过程中背板图处理模式。

默认值：DragPreviewMode.AUTO

当组件同时设置DragPreviewMode.AUTO和其它枚举值时，以DragPreviewMode.AUTO为准，其它枚举值设置无效。
numberBadge12+ boolean | number 否

控制数量角标是否显示，或强制设置显示的数量。当设置数量角标时取值范围为[0，231-1]，超过取值范围时会按默认状态处理。当设置为浮点数时，只显示整数部分。

说明：

在多选拖拽场景，需通过该接口设置拖拽对象的数量。

默认值：true
modifier12+ ImageModifier 否

用于配置拖拽背板图的样式Modifier对象，可使用图片组件所支持的属性和样式来配置背板图样式(参考示例6)，当前支持透明度，阴影，背景模糊度，圆角。文本拖拽只支持默认效果，不支持通过modifier进行自定义。

1.透明度

通过opacity设置透明度，不透明度的取值范围为0-1。设置0或不设置时采用默认值0.95，设置1或异常值时不透明。

2.阴影

通过shadow设置阴影。

3.背景模糊度

通过backgroundEffect或backgroundBlurStyle设置背景模糊度，如果两者同时设置，以backgroundEffect为准。

4.圆角

通过border或borderRadius设置圆角，当同时在mode和modifier中设置圆角，mode设置的圆角显示优先级低于modifier设置。

默认值：空，无法修改属性

DragPreviewMode11+枚举说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

展开
名称 枚举值 描述
AUTO 1 系统根据拖拽场景自动改变跟手点位置，根据规则自动对拖拽背板图进行缩放变换等。
DISABLE_SCALE 2 禁用系统对拖拽背板图的缩放行为。
ENABLE_DEFAULT_SHADOW12+ 3 启用非文本类组件默认阴影效果。
ENABLE_DEFAULT_RADIUS12+ 4 启用非文本类组件统一圆角效果，默认值12vp。当应用自身设置的圆角值大于默认值或modifier设置的圆角时，则显示应用自定义圆角效果。

DragInteractionOptions12+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

展开
名称 类型 必填 描述
isMultiSelectionEnabled boolean 否

表示拖拽过程中背板图是否支持多选聚拢效果。该参数只在Grid和List组件中的GridItem组件和ListItem组件生效。

当一个item组件设置为多选拖拽时，该组件的子组件不可拖拽。聚拢组件预览图设置的优先级为dragPreview中的string，dragPreview中的PixelMap，组件自截图，不支持dragPreview中的Builder形式。

不支持组件绑定bindContextMenu中参数存在isShown的模式。

默认值：false
defaultAnimationBeforeLifting boolean 否

表示是否启用长按浮起阶段组件自身的默认点按效果（缩小）。

默认值：false

示例

示例1（允许拖拽和落入）

该示例通过配置allowDrop和draggable分别设置组件是否可落入和拖拽。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData';
  3. 

  4. @Entry
  5. @Component
  6. struct ImageExample {
  7.   @State uri: string = ""
  8.   @State AblockArr: string[] = []
  9.   @State BblockArr: string[] = []
  10.   @State AVisible: Visibility = Visibility.Visible
  11.   @State dragSuccess :Boolean = false
  12. 

  13.   build() {
  14.     Column() {
  15.       Text('Image拖拽')
  16.         .fontSize('30dp')
  17.       Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
  18.         Image($r('app.media.icon'))
  19.           .width(100)
  20.           .height(100)
  21.           .border({ width: 1 })
  22.           .visibility(this.AVisible)
  23.           .draggable(true)
  24.           .onDragEnd((event: DragEvent) => {
  25.             let ret = event.getResult();
  26.             if(ret == 0) {
  27.               console.log("enter ret == 0")
  28.               this.AVisible = Visibility.Hidden;
  29.             } else {
  30.               console.log("enter ret != 0")
  31.               this.AVisible = Visibility.Visible;
  32.             }
  33.           })
  34.       }
  35.       .margin({ bottom: 20 })
  36.       Row() {
  37.         Column(){
  38.           Text('不允许释放区域')
  39.             .fontSize('15dp')
  40.             .height('10%')
  41.           List(){
  42.             ForEach(this.AblockArr, (item:string, index) => {
  43.               ListItem() {
  44.                 Image(item)
  45.                   .width(100)
  46.                   .height(100)
  47.                   .border({width: 1})
  48.               }
  49.               .margin({ left: 30 , top : 30})
  50.             }, (item:string) => item)
  51.           }
  52.           .height('90%')
  53.           .width('100%')
  54.           .allowDrop([uniformTypeDescriptor.UniformDataType.TEXT])
  55.           .onDrop((event?: DragEvent, extraParams?: string) => {
  56.             this.uri = JSON.parse(extraParams as string).extraInfo;
  57.             this.AblockArr.splice(JSON.parse(extraParams as string).insertIndex, 0, this.uri);
  58.             console.log("ondrop not udmf data");
  59.           })
  60.           .border({width: 1})
  61.         }
  62.         .height("50%")
  63.         .width("45%")
  64.         .border({ width: 1 })
  65.         .margin({ left: 12 })
  66.         Column(){
  67.           Text('可释放区域')
  68.             .fontSize('15dp')
  69.             .height('10%')
  70.           List(){
  71.             ForEach(this.BblockArr, (item:string, index) => {
  72.               ListItem() {
  73.                 Image(item)
  74.                   .width(100)
  75.                   .height(100)
  76.                   .border({width: 1})
  77.               }
  78.               .margin({ left: 30 , top : 30})
  79.             }, (item:string) => item)
  80.           }
  81.           .border({width: 1})
  82.           .height('90%')
  83.           .width('100%')
  84.           .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE])
  85.           .onDrop((event?: DragEvent, extraParams?: string) => {
  86.             console.log("enter onDrop")
  87.             let dragData:UnifiedData = (event as DragEvent).getData() as UnifiedData;
  88.             if(dragData != undefined) {
  89.               let arr:Array<unifiedDataChannel.UnifiedRecord> = dragData.getRecords();
  90.               if(arr.length > 0) {
  91.                 let image = arr[0] as unifiedDataChannel.Image;
  92.                 this.uri = image.imageUri;
  93.                 this.BblockArr.splice(JSON.parse(extraParams as string).insertIndex, 0, this.uri);
  94.               } else {
  95.                 console.log(`dragData arr is null`)
  96.               }
  97.             } else {
  98.               console.log(`dragData  is undefined`)
  99.             }
  100.             console.log("ondrop udmf data");
  101.             this.dragSuccess = true
  102.           })
  103.         }
  104.         .height("50%")
  105.         .width("45%")
  106.         .border({ width: 1 })
  107.         .margin({ left: 12 })
  108.       }
  109.     }.width('100%')
  110.   }
  111. }

示例2（设置预览图）

该示例通过配置dragPreview设置拖拽过程的预览图。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct DragPreviewDemo{
  5.   @Builder dragPreviewBuilder() {
  6.     Column() {
  7.       Text("dragPreview")
  8.         .width(150)
  9.         .height(50)
  10.         .fontSize(20)
  11.         .borderRadius(10)
  12.         .textAlign(TextAlign.Center)
  13.         .fontColor(Color.Black)
  14.         .backgroundColor(Color.Pink)
  15.     }
  16.   }
  17. 

  18.   @Builder MenuBuilder() {
  19.     Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
  20.       Text("menu item 1")
  21.         .fontSize(15)
  22.         .width(100)
  23.         .height(40)
  24.         .textAlign(TextAlign.Center)
  25.         .fontColor(Color.Black)
  26.         .backgroundColor(Color.Pink)
  27.       Divider()
  28.         .height(5)
  29.       Text("menu item 2")
  30.         .fontSize(15)
  31.         .width(100)
  32.         .height(40)
  33.         .textAlign(TextAlign.Center)
  34.         .fontColor(Color.Black)
  35.         .backgroundColor(Color.Pink)
  36.     }
  37.     .width(100)
  38.   }
  39. 

  40.   build() {
  41.     Row() {
  42.       Column() {
  43.         Image('/resource/image.jpeg')
  44.           .width("30%")
  45.           .draggable(true)
  46.           .bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
  47.           .onDragStart(() => {
  48.             console.log("Image onDragStart")
  49.           })
  50.           .dragPreview(this.dragPreviewBuilder)
  51.       }
  52.       .width("100%")
  53.     }
  54.     .height("100%")
  55.   }
  56. }

示例3（设置背板图样式）

该示例通过配置dragPreviewOptions为ENABLE_DEFAULT_SHADOW和ENABLE_DEFAULT_RADIUS设置默认阴影和统一圆角效果。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct dragPreviewOptionsDemo{
  5.   build() {
  6.     Row() {
  7.       Column() {
  8.         Image('/resource/image.jpeg')
  9.           .margin({ top: 10 })
  10.           .width("100%")
  11.           .draggable(true)
  12.           .dragPreviewOptions({ mode: DragPreviewMode.AUTO })
  13.         Image('/resource/image.jpeg')
  14.           .margin({ top: 10 })
  15.           .width("80%")
  16.           .border({ radius: { topLeft: 1, topRight: 2, bottomLeft: 4, bottomRight: 8 } })
  17.           .draggable(true)
  18.           .dragPreviewOptions({ mode: [ DragPreviewMode.ENABLE_DEFAULT_SHADOW, DragPreviewMode.ENABLE_DEFAULT_RADIUS ] })
  19.       }
  20.       .width("100%")
  21.       .height("100%")
  22.     }
  23.   }
  24. }

示例4（设置多选拖拽）

该示例通过配置isMultiSelectionEnabled实现Grid组件的多选拖拽效果。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Example {
  4.   @State numbers: number[] = [0, 1, 2, 3, 4 , 5, 6, 7, 8]
  5.   build() {
  6.     Column({ space: 5}) {
  7.       Grid() {
  8.         ForEach(this.numbers, (item: number) => {
  9.           GridItem() {
  10.             Column()
  11.               .backgroundColor(Color.Blue)
  12.               .width('100%')
  13.               .height('100%')
  14.           }
  15.           .width(90)
  16.           .height(90)
  17.           .selectable(true)
  18.           .selected(true)
  19.           .dragPreviewOptions({}, {isMultiSelectionEnabled:true})
  20.           .onDragStart(()=>{
  21. 

  22.           })
  23.     }, (item: string) => item)
  24.       }
  25.       .columnsTemplate('1fr 1fr 1fr')
  26.       .rowsTemplate('1fr 1fr 1fr')
  27.       .height(300)
  28.     }
  29.     .width('100%')
  30.   }
  31. }

示例5（设置默认点按效果）

该示例通过配置defaultAnimationBeforeLifting实现Grid组件的默认点按效果。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Example {
  4.   @State numbers: number[] = [0, 1, 2, 3, 4 , 5, 6, 7, 8]
  5.   build() {
  6.     Column({ space: 5}) {
  7.       Grid() {
  8.         ForEach(this.numbers, (item: number) => {
  9.           GridItem() {
  10.             Column()
  11.               .backgroundColor(Color.Blue)
  12.               .width('100%')
  13.               .height('100%')
  14.           }
  15.           .width(90)
  16.           .height(90)
  17.           .selectable(true)
  18.           .selected(true)
  19.           .dragPreviewOptions({}, {isMultiSelectionEnabled:true, defaultAnimationBeforeLifting:true})
  20.           .onDragStart(()=>{
  21. 

  22.           })
  23.     }, (item: string) => item)
  24.       }
  25.       .columnsTemplate('1fr 1fr 1fr')
  26.       .rowsTemplate('1fr 1fr 1fr')
  27.       .height(300)
  28.     }
  29.     .width('100%')
  30.   }
  31. }

示例6（自定义背板图样式）

该示例通过配置ImageModifier实现Image组件的自定义背板图样式。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. import { ImageModifier } from '@kit.ArkUI'
  3. 

  4. @Entry
  5. @Component
  6. struct dragPreviewOptionsDemo{
  7.   @State myModifier: ImageAttribute = new ImageModifier().opacity(0.5)
  8.   @State vis: boolean = true
  9.   @State changeValue: string = ''
  10.   @State submitValue: string = ''
  11.   @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
  12.   controller: SearchController = new SearchController()
  13.   @State OpacityIndex: number = 0
  14.   @State OpacityList:(number | undefined | null)[]=[
  15.     0.3,0.5,0.7,1,-50,0,10,undefined,null
  16.   ]
  17.   build() {
  18.     Row() {
  19.       Column() {
  20.         Text(this.OpacityList[this.OpacityIndex] + "")
  21.         Button("Opacity")
  22.           .onClick(()=> {
  23.             this.OpacityIndex++
  24.             if(this.OpacityIndex > this.OpacityList.length - 1){
  25.               this.OpacityIndex = 0
  26.             }
  27.           })
  28.         Image($r('app.media.image'))
  29.           .margin({ top: 10 })
  30.           .width("100%")
  31.           .draggable(true)
  32.           .dragPreviewOptions({modifier: this.myModifier.opacity(this.OpacityList[this.OpacityIndex]) as ImageModifier})
  33.       }
  34.       .width("50%")
  35.       .height("50%")
  36.     }
  37.   }
  38. }

示例7（图片拖拽设置）

该示例展示了不同图片（在线图片资源、本地图片资源和PixelMap）在拖拽时组件的设置。

使用网络图片时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考声明权限。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. import { uniformTypeDescriptor, unifiedDataChannel } from '@kit.ArkData';
  3. import { image } from '@kit.ImageKit';
  4. import { request } from '@kit.BasicServicesKit';
  5. import { common } from '@kit.AbilityKit';
  6. import { fileIo } from '@kit.CoreFileKit';
  7. import { buffer } from '@kit.ArkTS';
  8. import { BusinessError } from '@kit.BasicServicesKit';
  9. 

  10. @Entry
  11. @Component
  12. struct ImageDrag {
  13.   @State targetImage1: string | PixelMap | null = null;
  14.   @State targetImage2: string | PixelMap | null = null;
  15.   @State targetImage3: string | PixelMap | null = null;
  16.   context = getContext(this) as common.UIAbilityContext;
  17.   filesDir = this.context.filesDir;
  18. 

  19.   public async createPixelMap(pixelMap: unifiedDataChannel.SystemDefinedPixelMap): Promise<image.PixelMap | null> {
  20.     let mWidth: number = (pixelMap.details?.width ?? -1) as number;
  21.     let mHeight: number = (pixelMap.details?.width ?? -1) as number;
  22.     let mPixelFormat: image.PixelMapFormat =
  23.       (pixelMap.details?.['pixel-format'] ?? image.PixelMapFormat.UNKNOWN) as image.PixelMapFormat;
  24.     let mItemPixelMapData: Uint8Array = pixelMap.rawData;
  25.     const opts: image.InitializationOptions = {
  26.       editable: false, pixelFormat: mPixelFormat, size: {
  27.         height: mHeight,
  28.         width: mWidth
  29.       }
  30.     };
  31.     const buffer: ArrayBuffer = mItemPixelMapData.buffer.slice(mItemPixelMapData.byteOffset,
  32.       mItemPixelMapData.byteLength + mItemPixelMapData.byteOffset);
  33.     try {
  34.       let pixelMap: image.PixelMap = await image.createPixelMap(buffer, opts);
  35.       return pixelMap;
  36.     } catch (err) {
  37.       console.error('dragtest--> getPixelMap', err);
  38.       return null;
  39.     }
  40.   }
  41. 

  42.   build() {
  43.     Column() {
  44.       Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {
  45.         // 在线图片资源拖出
  46.         Column() {
  47.           Text('Online Image').fontSize(14)
  48.           Image('https://www.example.com/xxx.png') // 请填写一个具体的网络图片地址
  49.             .objectFit(ImageFit.Contain).draggable(true)
  50.             .onDragStart(() => {})
  51.             .width(100).height(100)
  52.         }
  53.         .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
  54.         .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  55. 

  56.         // 本地图片资源拖出
  57.         Column() {
  58.           Text('Local Image').fontSize(14)
  59.           Image($r('app.media.example'))
  60.             .objectFit(ImageFit.Contain).draggable(true)
  61.             .onDragStart(() => {})
  62.             .width(100).height(100)
  63.         }
  64.         .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
  65.         .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  66. 

  67.         // PixelMap拖出
  68.         Column() {
  69.           Text('PixelMap').fontSize(14)
  70.           Image(this.context.resourceManager.getDrawableDescriptor($r('app.media.example').id).getPixelMap())
  71.             .objectFit(ImageFit.Contain).draggable(true)
  72.             .onDragStart(() => {})
  73.             .width(100).height(100)
  74.         }
  75.         .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
  76.         .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  77.       }
  78. 

  79.       // 落入数据类型为Image
  80.       Text('Data type is Image').fontSize(14).margin({ top: 10 })
  81.       Column() {
  82.         Image(this.targetImage1)
  83.           .objectFit(ImageFit.Contain)
  84.           .width('70%').height('70%')
  85.           .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE])
  86.           .onDrop((event: DragEvent, extraParams: string) => {
  87.             // 通过extraParams获取图片
  88.             let arr: Record<string, object> = JSON.parse(extraParams) as Record<string, object>;
  89.             let uri = arr['extraInfo'];
  90.             if (typeof uri == 'string') {
  91.               this.targetImage1 = uri;
  92. 

  93.               try {
  94.                 request.downloadFile(this.context, {
  95.                   url: uri,
  96.                   filePath: this.filesDir + '/example.png'
  97.                 }).then((downloadTask: request.DownloadTask) => {
  98.                   let file = fileIo.openSync(this.filesDir + '/example.png', fileIo.OpenMode.READ_WRITE);
  99.                   let arrayBuffer = new ArrayBuffer(1024);
  100.                   let readLen = fileIo.readSync(file.fd, arrayBuffer);
  101.                   let buf = buffer.from(arrayBuffer, 0, readLen);
  102.                   console.info(`The content of file: ${buf.toString()}`);
  103.                   fileIo.closeSync(file);
  104.                 })
  105.               } catch (error) {}
  106.             }
  107.           })
  108.       }
  109.       .width('70%').height('25%')
  110.       .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
  111.       .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  112. 

  113.       Column() {
  114.         Image(this.targetImage2)
  115.           .objectFit(ImageFit.Contain)
  116.           .width('70%').height('70%')
  117.           .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE])
  118.           .onDrop((event: DragEvent, extraParams: string) => {
  119.             // 通过uniformTypeDescriptor获取图片
  120.             let data: UnifiedData = event.getData();
  121.             let records: Array<unifiedDataChannel.UnifiedRecord> = data.getRecords();
  122.             if (records[0].getType() ===uniformTypeDescriptor.UniformDataType.IMAGE) {
  123.               let image: unifiedDataChannel.Image = records[0] as unifiedDataChannel.Image;
  124.               this.targetImage2 = image.imageUri;
  125.             }
  126.           })
  127.       }
  128.       .width('70%').height('25%')
  129.       .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
  130.       .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  131. 

  132.       // 落入数据类型为PixelMap
  133.       Text('Data type is PixelMap').fontSize(14).margin({ top: 10 })
  134.       Column() {
  135.         Image(this.targetImage3)
  136.           .objectFit(ImageFit.Contain)
  137.           .width('70%').height('70%')
  138.           .allowDrop([uniformTypeDescriptor.UniformDataType.OPENHARMONY_PIXEL_MAP])
  139.           .onDrop(async (event: DragEvent, extraParams: string) => {
  140.             // 通过uniformTypeDescriptor获取图片
  141.             let data: UnifiedData = event.getData();
  142.             let records: Array<unifiedDataChannel.UnifiedRecord> = data.getRecords();
  143.             if (records[0].getType() ===uniformTypeDescriptor.UniformDataType.OPENHARMONY_PIXEL_MAP) {
  144.               let record: unifiedDataChannel.SystemDefinedPixelMap = records[0] as unifiedDataChannel.SystemDefinedPixelMap;
  145.               this.targetImage3 = await this.createPixelMap(record);
  146. 

  147.               // 落盘到本地
  148.               const imagePackerApi = image.createImagePacker();
  149.               let packOpts : image.PackingOption = { format: "image/jpeg", quality:98 };
  150.               const path : string = this.context.cacheDir + "/pixel_map.jpg";
  151.               let file = fileIo.openSync(path, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);
  152.               imagePackerApi.packToFile(this.targetImage3, file.fd, packOpts).then(() => {
  153.                 // 直接打包进文件
  154.               }).catch((error : BusinessError) => {
  155.                 console.error('Failed to pack the image. And the error is: ' + error);
  156.               })
  157.             }
  158.           })
  159.       }
  160.       .width('70%').height('25%')
  161.       .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
  162.       .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  163. 

  164.     }.width('100%').height('100%')
  165.   }
  166. }

文本通用
安全区域
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 API参考 中进行搜索
请输入您想要搜索的关键词