代理公司网站备案,天津网站优化步骤,郑州做软件开发的公司,南昌个人做网站【关键字】
HarmonyOS、低代码平台、组件拖拽、常用基础组件、基础容器 1、写在前面
之前是花了一些时间介绍了在低代码平台中滚动容器、网格布局、页签容器、列表这几种容器的拖拽技巧及使用方法#xff0c;今天我会继续来介绍咱们在应用开发中可能会经常用到的一些基础容器…【关键字】
HarmonyOS、低代码平台、组件拖拽、常用基础组件、基础容器 1、写在前面
之前是花了一些时间介绍了在低代码平台中滚动容器、网格布局、页签容器、列表这几种容器的拖拽技巧及使用方法今天我会继续来介绍咱们在应用开发中可能会经常用到的一些基础容器和基础组件由于它们的使用都比较简单所以我准备结合一个实际的登录页面的案例分上下两篇的时间一起介绍本篇是上篇我们按照页面构建的顺序会介绍上半部分页面的构建过程。在介绍之前我们先来看一下要实现的登录页面的样式让大家有一个整体的印象 2、开发实战
有了上面的整体印象我们开始逐步的去介绍怎么构建这样一个页面在构建的过程中分别使用的是哪些组件下面跟着我一起来动手实战一下吧。 2.1、文本组件
首先可以看到页面中最外层的父容器是垂直容器垂直容器顾名思义就是它内部的组件按照垂直方向从上往下排列在属性中可以设置相关的属性比如这里我们设置的主轴对齐方式是起点对齐交叉轴对齐方式为居中对齐它会从页面顶部开始排列还有其它的宽高边距等等的设置整体来看垂直容器的使用还是比较简单的。
然后从左侧组件库中拖拽一个文本组件到垂直容器中在属性栏中我们设置宽100%、高50vp然后为其填入文本内容接着我们设置字体大小18fp字体加粗文本居中对齐修改字体颜色为蓝色另外同样的也可以设置背景、边框、边距等等属性篇幅关系这里就不再一一演示了大家可以实际操作一下就很容易掌握文本组件的使用了开发过程如图所示 2.2、图片组件
从组件库中拖拽一个图片组件到垂直容器中在属性栏中设置宽高都是80vp上外边距设置为50vp缩放类型这里选的是填充数据源选择我们提前在素材库中准备好的图片可以看到图片组件的使用也是比较简单的如下图所示 2.3、弹性容器
接着从组件库中拖拽一个弹性容器弹性容器的主轴方向是可以设置为横向或者纵向的这里我们设置的是横向排列且元素不换行那这样咱们的主轴就是横向的接着设置主轴和交叉轴的对齐方式都是居中。设置宽90%、高50vp上外边距80vp。然后内部拖拽一个文本组件和一个文本输入框组件这两个组件会成横向排列设置一下这两个组件的宽高和边距具体步骤如下图所示 2.4、横向容器
横向容器和垂直容器类似一个是纵向的一个是水平方向的它的主轴就是水平方向的交叉轴就是垂直方向的这里设置主轴和交叉轴的对齐方式都是居中对齐设置宽90%、高50vp和上一小节中的弹性容器保持一致另外设置它的上外边距是10vp。然后在内部同样的是拖拽了一个文本组件和一个文本输入框组件并且设置了这两个组件的尺寸操作如下图所示 2.5、文本输入框
前面两个小节中我们在弹性容器和横向容器中都拖入了文本输入框组件文本输入框组件可以输入相关内容在属性中可以设置提示文本、输入框类型及提示文本的字体大小颜色等在用户名一栏的文本输入框组件由于是需要输入用户名信息这里输入框类型选择默认的即可即基本类型下方的密码一栏的输入框由于是需要输入密码所以修改输入框类型为密码类型并且默认提供了“小眼睛”即显示隐藏效果最后我们设置最大输入字符30这里做一下输入内容长度的限制步骤如下图所示 OK由于篇幅原因本篇就介绍到这里我们下一篇继续介绍下半部分的使用。
下期再会
