鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：拖拽控制）

news2024/11/16 9:30:55

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

说明：

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

ArkUI框架对以下组件实现了默认的拖拽能力，支持对数据的拖出或拖入响应，开发者只需要将这些组件的draggable属性设置为true，即可使用默认拖拽能力。

  • 默认支持拖出能力的组件（可从组件上拖出数据）：Search、TextInput、TextArea、RichEditor、Text、Image、FormComponent、Hyperlink

  • 默认支持拖入能力的组件（目标组件可响应拖入数据）：Search、TextInput、TextArea、Video

开发者也可以通过实现通用拖拽事件来自定义拖拽响应。

其他组件需要开发者将draggable属性设置为true，并在onDragStart等接口中实现数据传输相关内容，才能正确处理拖拽。

allowDrop

allowDrop(value: Array<UniformDataType>)

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

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

参数：

参数名类型必填说明
valueArray<UniformDataType>是设置该组件上允许落入的数据类型。
默认值：空

draggable

draggable(value: boolean)

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

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

参数：

参数名类型必填说明
valueboolean是设置该组件是否允许进行拖拽。
默认值：false

dragPreview11+

dragPreview(value: CustomBuilder | DragItemInfo)

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

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

参数：

参数名类型必填说明
valueCustomBuilder | DragItemInfo是设置组件拖拽过程中的预览图，仅在onDragStart拖拽方式中有效。
当组件支持拖拽并同时设置bindContextMenu的预览图时，则长按浮起的预览图以bindContextMenu设置的预览图为准。开发者在onDragStart中返回的背板图优先级低于dragPreview设置的预览图，当设置了dragPreview预览图时，拖拽过程中的背板图使用dragPreview预览图。由于CustomBuilder需要离线渲染之后才能使用，因此存在一定的性能开销和时延，推荐优先使用 DragItemInfo中的PixelMap方式。
默认值：空

dragPreviewOptions11+

dragPreviewOptions(value: DragPreviewOptions)

设置拖拽过程中背板图处理模式。

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

参数：

参数名类型必填说明
valueDragPreviewOptions11+是设置拖拽过程中背板图处理模式。
默认值：DragPreviewMode.AUTO

DragPreviewOptions11+

名称类型必填描述
modeDragPreviewMode否表示拖拽过程中背板图处理模式。
默认值：DragPreviewMode.AUTO

DragPreviewMode11+枚举说明

名称枚举值描述
AUTO0系统根据拖拽场景自动改变跟手点位置，根据规则自动对拖拽背板图进行缩放变换等。
DISABLE_SCALE1禁用系统对拖拽背板图的缩放行为。

示例

示例1

allowDrop与draggable属性用法示例

// xxx.ets
import UDC from '@ohos.data.unifiedDataChannel';
import UTD from '@ohos.data.uniformTypeDescriptor';

@Entry
@Component
struct ImageExample {
  @State uri: string = ""
  @State AblockArr: string[] = []
  @State BblockArr: string[] = []
  @State AVisible: Visibility = Visibility.Visible
  @State dragSuccess :Boolean = false

  build() {
    Column() {
      Text('Image拖拽')
        .fontSize('30dp')
      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
        Image($r('app.media.icon'))
          .width(100)
          .height(100)
          .border({ width: 1 })
          .visibility(this.AVisible)
          .draggable(true)
          .onDragEnd((event: DragEvent) => {
            let ret = event.getResult();
            if(ret == 0) {
              console.log("enter ret == 0")
              this.AVisible = Visibility.Hidden;
            } else {
              console.log("enter ret != 0")
              this.AVisible = Visibility.Visible;
            }
          })
      }
      .margin({ bottom: 20 })
      Row() {
        Column(){
          Text('不允许释放区域(显示不允许角标但可以释放)')
            .fontSize('15dp')
            .height('10%')
          List(){
            ForEach(this.AblockArr, (item:string, index) => {
              ListItem() {
                Image(item)
                  .width(100)
                  .height(100)
                  .border({width: 1})
              }
              .margin({ left: 30 , top : 30})
            }, (item:string) => item)
          }
          .height('90%')
          .width('100%')
          .allowDrop([UTD.UniformDataType.TEXT])
          .onDrop((event?: DragEvent, extraParams?: string) => {
            this.uri = JSON.parse(extraParams as string).extraInfo;
            this.AblockArr.splice(JSON.parse(extraParams as string).insertIndex, 0, this.uri);
            console.log("ondrop not udmf data");
          })
          .border({width: 1})
        }
        .height("50%")
        .width("45%")
        .border({ width: 1 })
        .margin({ left: 12 })
        Column(){
          Text('可释放区域')
            .fontSize('15dp')
            .height('10%')
          List(){
            ForEach(this.BblockArr, (item:string, index) => {
              ListItem() {
                Image(item)
                  .width(100)
                  .height(100)
                  .border({width: 1})
              }
              .margin({ left: 30 , top : 30})
            }, (item:string) => item)
          }
          .border({width: 1})
          .height('90%')
          .width('100%')
          .allowDrop([UTD.UniformDataType.IMAGE])
          .onDrop((event?: DragEvent, extraParams?: string) => {
            console.log("enter onDrop")
            let dragData:UnifiedData = (event as DragEvent).getData() as UnifiedData;
            if(dragData != undefined) {
              let arr:Array<UDC.UnifiedRecord> = dragData.getRecords();
              if(arr.length > 0) {
                let image = arr[0] as UDC.Image;
                this.uri = image.imageUri;
                this.BblockArr.splice(JSON.parse(extraParams as string).insertIndex, 0, this.uri);
              } else {
                console.log(`dragData arr is null`)
              }
            } else {
              console.log(`dragData  is undefined`)
            }
            console.log("ondrop udmf data");
            this.dragSuccess = true
          })
        }
        .height("50%")
        .width("45%")
        .border({ width: 1 })
        .margin({ left: 12 })
      }
    }.width('100%')
  }
}

dragImage.gif

示例2

dragPreview属性用法示例

// xxx.ets
@Entry
@Component
struct DragPreviewDemo{
  @Builder dragPreviewBuilder() {
    Column() {
      Text("dragPreview")
        .width(150)
        .height(50)
        .fontSize(20)
        .borderRadius(10)
        .textAlign(TextAlign.Center)
        .fontColor(Color.Black)
        .backgroundColor(Color.Pink)
    }
  }

  @Builder MenuBuilder() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Text("menu item 1")
        .fontSize(15)
        .width(100)
        .height(40)
        .textAlign(TextAlign.Center)
        .fontColor(Color.Black)
        .backgroundColor(Color.Pink)
      Divider()
        .height(5)
      Text("menu item 2")
        .fontSize(15)
        .width(100)
        .height(40)
        .textAlign(TextAlign.Center)
        .fontColor(Color.Black)
        .backgroundColor(Color.Pink)
    }
    .width(100)
  }

  build() {
    Row() {
      Column() {
        Image('/resource/image.jpeg')
          .width("30%")
          .draggable(true)
          .bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
          .onDragStart(() => {
            console.log("Image onDragStart")
          })
          .dragPreview(this.dragPreviewBuilder)
      }
      .width("100%")
    }
    .height("100%")
  }
}

dragPreview.gif

示例3

dragPreviewOptions属性用法示例

// xxx.ets
@Entry
@Component
struct dragPreviewOptionsDemo{
  build() {
    Row() {
      Column() {
        Image('/resource/image.jpeg')
          .margin({ top: 10 })
          .width("100%")
          .draggable(true)
          .dragPreviewOptions({ mode: DragPreviewMode.AUTO })
      }
      .width("100%")
      .height("100%")
    }
  }
}

dragPreviewOptions.gif

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1490745.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

商家转账到零钱申请时间要多久

商家转账到零钱申请时间要多久

商家转账到零钱是什么&#xff1f; 【商家转账到零钱】功能整合了微信支付之前的【企业付款到零钱】【批量转账到零钱】功能&#xff0c;支持批量对外转账&#xff0c;对有批量对用户付款需求的应用场景更友好&#xff0c;操作便捷。如果你的应用场景是单付款场景的话&#xf…
阅读更多...
运维打工人，周末兼职送外卖的一天

运维打工人，周末兼职送外卖的一天

运维打工人&#xff0c;周末兼职送外卖的一天 在那个不经意的周末&#xff0c;我决定尝试一份新的工作——为美团外卖做兼职配送员。这份工作对于一向规律生活的我来说&#xff0c;既是突破也是挑战。 早晨&#xff0c;空气中带着几分凉意和宁静。准备好出发时&#xff0c;线…
阅读更多...
如何做代币分析：以 CRO 币为例

如何做代币分析：以 CRO 币为例

作者&#xff1a;lesleyfootprint.network 编译&#xff1a;Mingfootprint.network 数据源&#xff1a;CRO Token Dashboard &#xff08;仅包括以太坊数据&#xff09; 在加密货币和数字资产领域&#xff0c;代币分析起着至关重要的作用。代币分析指的是深入研究与代币相关…
阅读更多...
Unity编辑器功能Inspector快捷自动填充数据

Unity编辑器功能Inspector快捷自动填充数据

我们有时候可能需要在面板增加一些引用&#xff0c;可能添加脚本后要手动拖动&#xff0c;这样如果有大量的脚本拖动也是不小的工作量 实例 例如&#xff1a;我的脚本需要添加一个Bone的列表&#xff0c;一个个拖动很麻烦。 实现脚本 我们可以用这样的脚本来实现。 public…
阅读更多...
鼠标右键没有git bash here，右键添加git bash here并增加图标

鼠标右键没有git bash here，右键添加git bash here并增加图标

突然发现自己鼠标右键没有git bash here&#xff0c;或者安装之后就没有git bash here。后面那种情况多半是没有默认装在C盘。我们装在其他盘的时候就需要自己去配置。git gui目前用不上&#xff0c;这里只讲git bash here。网上一堆教程&#xff0c;说法不同大多不能用要么就很…
阅读更多...
Vue router文件中本地路由配置使用i18n【解决tab名称出现undefined，导致i18n没有实现问题】

Vue router文件中本地路由配置使用i18n【解决tab名称出现undefined，导致i18n没有实现问题】

问题 点击按钮 跳转详情页后 tab名称出现错误&#xff0c;报 undefined ## 需求 点击工单详情按钮&#xff0c;跳转详情页面&#xff08;新页面&#xff09;&#xff0c;新页面tab栏名称 还是为 工单出库&#xff0c;但要求工单出库文字配置为多语言&#xff0c;使用i18n来配置…
阅读更多...
SPC 之 I-MR 控制图

SPC 之 I-MR 控制图

概述 1924 年&#xff0c;美国的休哈特博士应用统计数学理论将 3Sigma 原理运用于生产过程中&#xff0c;并发表了 著名的“控制图法”&#xff0c;对产品特性和过程变量进行控制&#xff0c;开启了统计过程控制新时代。 什么是控制图 控制图指示过程何时不受控制&#xff…
阅读更多...
中医舌苔笔记

中医舌苔笔记

舌诊时按照舌尖-舌中-舌根-舌侧的顺序进行观察。 先看舌体再看舌苔&#xff0c;30秒左右。 如果一次望舌判断不清&#xff0c;可令病人休息3~5分钟后&#xff0c;重新观察一次 舌诊脏腑部位分属图 舌体 胖嫩而边有齿痕为气虚、阳虚。 薄白而润为风寒&#xff1b; 薄白而燥…
阅读更多...
RabbitMQ如何实现延迟消息?

RabbitMQ如何实现延迟消息?

RabbitMQ中是可以实现延迟消息的&#xff0c;一般有两种方式&#xff0c;分别是通过死信队列以及通过延迟消息插件来实现。 扩展&#xff1a; 死信队列 当rabbitMQ中的一条正常的消息&#xff0c;因为过了存活时间&#xff08;TTL过期&#xff09;&#xff0c;队列长度超限&a…
阅读更多...
【论文精读】Attention Bottlenecks for Multimodal Fusion 视频分类任务

【论文精读】Attention Bottlenecks for Multimodal Fusion 视频分类任务

本文并非逐句翻译&#xff0c;添加个人理解与疑惑&#xff0c;如有需要&#xff0c;请自行阅读原文。 Attention Bottlenecks for Multimodal Fusion 多模态融合的注意力瓶颈 会议&#xff1a;NIPS2021 Benchmark&#xff1a;Audioset、Epic Kitchens和VGGSound等 Backbone&…
阅读更多...
白酒：原料的预处理技术对白酒品质的影响

白酒：原料的预处理技术对白酒品质的影响

在豪迈白酒的酿造过程中&#xff0c;原料的预处理技术对白酒的品质起着至关重要的作用。预处理技术包括原料的选择、清洗、破碎、润料等环节&#xff0c;这些环节的处理方式直接影响着白酒的口感、香气和品质。云仓酒庄在原料的预处理技术方面进行了深入研究和探索&#xff0c;…
阅读更多...
图扑数字孪生水电站，水力发电可视化运维

图扑数字孪生水电站，水力发电可视化运维

自水轮机的早期发明被用于农业灌溉&#xff0c;到 18 世纪末期的工业革命促使水轮机技术的改良&#xff0c;再到 19 世纪末水利发电的崛起&#xff0c;直至今日&#xff0c;智慧水电站数字孪生技术正处于蓬勃发展之中。通过整合物联网、大数据、云计算等现代信息技术&#xff0…
阅读更多...
Python图像处理【21】基于卷积神经网络增强微光图像

Python图像处理【21】基于卷积神经网络增强微光图像

基于卷积神经网络增强微光图像 0. 前言1. MBLLEN 网络架构2. 增强微光图像小结系列链接 0. 前言 在本节中&#xff0c;我们将学习如何基于预训练的深度学习模型执行微光/夜间图像增强。由于难以同时处理包括亮度、对比度、伪影和噪声在内的所有因素&#xff0c;因此微光图像增…
阅读更多...
vscode设置打开浏览器

vscode设置打开浏览器

安装这个插件 Open Browser Preview
阅读更多...
linemap | 这样好看的山峦地图真的可以快速绘制啦~~

linemap | 这样好看的山峦地图真的可以快速绘制啦~~

上一次介绍了Python绘制svg的优秀可视化库Pygal&#xff0c;今天我们介绍一下一个优秀的R地图可视化绘制包-linemap包&#xff0c;顾名思义&#xff0c;该包是是为了绘制由线组成的地图&#xff0c;其官网如下&#xff1a;https://github.com/rCarto/linemap。该包主要拥有两个…
阅读更多...
鸿蒙实战开发：【SIM卡管理】

鸿蒙实战开发：【SIM卡管理】

概述 本示例展示了电话服务中SIM卡相关功能&#xff0c;包含SIM卡的服务提供商、ISO国家码、归属PLMN号信息&#xff0c;以及默认语音卡功能。 样例展示 基础信息 介绍 本示例使用sim相关接口&#xff0c;展示了电话服务中SIM卡相关功能&#xff0c;包含SIM卡的服务提供商、…
阅读更多...
Android Studio Iguana | 2023.2.1版本

Android Studio Iguana | 2023.2.1版本

Android Gradle 插件和 Android Studio 兼容性 Android Studio 构建系统基于 Gradle&#xff0c;并且 Android Gradle 插件 (AGP) 添加了一些特定于构建 Android 应用程序的功能。下表列出了每个版本的 Android Studio 所需的 AGP 版本。 如果特定版本的 Android Studio 不支持…
阅读更多...
pandas数据分析42——读取和写入stata和spss的数据格式

pandas数据分析42——读取和写入stata和spss的数据格式

python就是胶水语言&#xff0c;啥文件基本都能读取&#xff0c;而且pandas作为数据分析最好用的包&#xff0c;其功能自然也很多&#xff0c;可以读取各种数据文件。 本次就来演示一下怎么读取stata文件&#xff0c;和spss文件&#xff0c;他们不仅储存了数据和变量&#xff…
阅读更多...
如何解决iQOO手机运行uniapp真机调试时无法识别的问题

如何解决iQOO手机运行uniapp真机调试时无法识别的问题

打开开发者选项&#xff0c;打开USB设置&#xff0c;把默认USB选项改成MIDI模式&#xff0c;就可以检测到手机了
阅读更多...
Golang高级微调技术

Golang高级微调技术

本文分享了一些小技巧&#xff0c;可以帮助我们写出更简化、高效的Golang代码&#xff0c;从而获得更好的开发体验。原文: Fine-Tuning Golang: Advanced Techniques for Code Optimization 本文是Golang代码优化技术的综合指南&#xff0c;帮助我们释放 Golang 应用程序的全部…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023