首页 > 其他分享 >【HarmonyOS】低代码平台组件拖拽使用技巧之堆叠容器

【HarmonyOS】低代码平台组件拖拽使用技巧之堆叠容器

时间:2023-10-12 11:36:48浏览次数:40  
标签:容器 堆叠 HarmonyOS 组件 文本 拖拽 图片

​【关键字】

HarmonyOS、低代码平台、组件拖拽、堆叠组件

 

1、写在前面

从本篇开始,我们一起来学习一下低代码平台中组件的托拉拽,虽然组件拖拽十分简单,但实际上还是有一定的技巧,新手上路难免会遇到一定的问题,如果能熟练掌握拖拽的技巧,能够有效地提升咱们的开发效率哦,今天我们先来学习堆叠组件。

 

2、开发实战

首先我们需要在低代码平台的应用管理模块中新建一个元服务:

cke_261.png

然后点击编辑应用,进入到实际的页面开发中来,首先点击画布右上角的锁,解锁当前页面获取页面编辑的权限:

cke_830.png

接下来就可以编辑页面布局了,首先删除页面中的Hello World这个文本组件,然后从组件库中拖拽一个堆叠容器到画布里面:

cke_1622.png

然后想要实现堆叠容器中,下面是图片,上面是文本的效果,那么接着需要先拖拽一个图片组件到堆叠容器中:

cke_2629.png

技巧1:拖拽时先不要松开鼠标,注意看绿色的线就是图片组件在画布中的位置,此时可以看到,绿色的线已经处于堆叠容器的内部了,黄色的矩形就是堆叠容器的位置,此时松开鼠标,图片组件就是处于堆叠容器的内部了。

接着来拖拽文本组件,让文本组件位于图片组件的上方:

cke_3843.png

技巧2:拖拽文本组件到堆叠容器中,注意看绿色的线的位置,当绿色线位于图片的右侧时,此时松开鼠标则文本组件正好位于图片组件的上方,如果绿色线在图片左侧时松开则文本组件位于图片组件的下方,这里一定要注意,堆叠容器的特性,堆叠容器即Stack布局,这种是栈的结构设计。

最后我们调整一下各个组件的位置,为图片组件和文本组件设置图片和文字就完成想要的效果啦。

完整的实现过程我做了一张动态图,有需要的可以体会一下整个过程:

e1102740b6600d1bd5a2d6a36cd1936b_1214x781.gif%40900-0-90-f.gif

OK,到这里,今天要介绍的技巧就已经实现啦,下期再会!

标签:容器,堆叠,HarmonyOS,组件,文本,拖拽,图片
From: https://www.cnblogs.com/mayism123/p/17759095.html

相关文章

  • 【HarmonyOS】低代码平台组件拖拽使用技巧之滚动容器
    ​【关键字】HarmonyOS、低代码平台、组件拖拽、滚动容器 1、写在前面上一篇中我们介绍了低代码平台组件库中的堆叠容器的一些拖拽技巧,本篇我们继续,今天带大家一些来看一个新的组件——滚动容器。关于滚动容器的直接使用其实很简单,所以这个不是今天的重点,今天的重点是如何在......
  • HarmonyOS远端状态订阅开发实例
     IPC/RPC提供对远端Stub对象状态的订阅机制, 在远端Stub对象消亡时,可触发消亡通知告诉本地Proxy对象。这种状态通知订阅需要调用特定接口完成,当不再需要订阅时也需要调用特定接口取消。使用这种订阅机制的用户,需要实现消亡通知接口DeathRecipient并实现onRemoteDied方法清理资源......
  • HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Toggle
    组件提供勾选框样式、状态按钮样式及开关样式。该组件从APIVersion8开始支持。仅当ToggleType为Button时可包含子组件。一、接口Toggle(options:{type:ToggleType,isOn?:boolean})从APIversion9开始,该接口支持在ArkTS卡片中使用。参数:ToggleType枚举说明从APIversion9......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-18-处理鼠标拖拽-上篇
    1.简介本文主要介绍两个在测试过程中可能会用到的功能:在selenium中宏哥介绍了Actions类中的拖拽操作和Actions类中的划取字段操作。例如:需要在一堆log字符中随机划取一段文字,然后右键选择摘取功能。playwright同样可以实现元素的拖拽和释放的操作。2.拖拽操作鼠标拖拽操作,顾名......
  • 物联网开发利器:基于web的强大的可拖拽组态软件
    BY组态是一款功能强大的基于Web的可视化组态编辑器,采用标准HTML5技术,基于B/S架构进行开发,支持WEB端呈现,支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计。可快速构建和部署可扩展的SCADA、HMI、仪表板或IIoT系统。使用BY组态编辑器,可以创建现代化、可视化、......
  • 【PyQt6】Python窗口拖拽文件并响应的实现
    情景大概应用情景为:将一个文件拖入到窗口内,地址栏显示文件路径,文本框显示文件内容。说明实现拖拽必须在exec前设置QMineDate,否则不会开始拖拽操作。实现fromPyQt6.QtCoreimport*calssMainWindow(QMainWindow,Ui_MainWindow): def__init__(self): super().__init__......
  • 玩转HarmonyOS专项测试,轻松上架“五星”高品质应用
     作者:David,华为测试服务专家随着信息技术的高速发展,移动应用与人们生活日益紧密,面向各类场景的应用层出不穷,什么样的应用更受用户青睐呢?在满足用户功能需求之上,一个好的应用要能运行稳定、流畅不卡顿、占用内存小、安全等级高,此外,最好还能提供更多创新便捷的附加能力。为了......
  • 【HarmonyOS】元服务服务卡片网络开发
    ​【关键字】服务卡片、元服务、API6、网络请求、图片加载 一、API6服务卡片Java代码中如何进行网络请求?API6服务卡片基于FormAbility,一般元服务默认工程中的FormAbility就是MainAbility。由于FormAbility是Java语言编写的,可以使okhttp进行网络请求相关的开发。1、添加依赖:......
  • 【matplotlib 实战】--堆叠柱状图
    堆叠柱状图,是一种用来分解整体、比较各部分的图。与柱状图类似,堆叠柱状图常被用于比较不同类别的数值。而且,它的每一类数值内部,又被划分为多个子类别,这些子类别一般用不同的颜色来指代。柱状图帮助我们观察“总量”,堆叠柱状图则可以同时反映“总量”与“结构”。也就是说,堆叠柱状......
  • Echarts的地图实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="w......