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

发布时间 2023-10-12 11:26:22作者: Mayism123

【关键字】

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,到这里,今天要介绍的技巧就已经实现啦,下期再会!