首页 > 其他分享 >【HarmonyOS】低代码平台组件拖拽使用技巧之常用基础组件(上)

【HarmonyOS】低代码平台组件拖拽使用技巧之常用基础组件(上)

时间:2023-11-21 11:34:25浏览次数:29  
标签:容器 输入框 HarmonyOS 设置 组件 文本 拖拽

​【关键字】

HarmonyOS、低代码平台、组件拖拽、常用基础组件、基础容器

 

1、写在前面

之前是花了一些时间介绍了在低代码平台中滚动容器、网格布局、页签容器、列表这几种容器的拖拽技巧及使用方法,今天我会继续来介绍咱们在应用开发中可能会经常用到的一些基础容器和基础组件,由于它们的使用都比较简单,所以我准备结合一个实际的登录页面的案例,分上下两篇的时间一起介绍,本篇是上篇,我们按照页面构建的顺序会介绍上半部分页面的构建过程。在介绍之前,我们先来看一下要实现的登录页面的样式,让大家有一个整体的印象:

cke_393.png

2、开发实战

有了上面的整体印象,我们开始逐步的去介绍怎么构建这样一个页面,在构建的过程中分别使用的是哪些组件,下面跟着我一起来动手实战一下吧。

 

2.1、文本组件

首先可以看到页面中最外层的父容器是垂直容器,垂直容器顾名思义就是它内部的组件按照垂直方向从上往下排列,在属性中可以设置相关的属性,比如这里我们设置的主轴对齐方式是起点对齐,交叉轴对齐方式为居中对齐,它会从页面顶部开始排列,还有其它的宽高边距等等的设置,整体来看垂直容器的使用还是比较简单的。

然后从左侧组件库中拖拽一个文本组件到垂直容器中,在属性栏中我们设置宽:100%、高50vp,然后为其填入文本内容,接着我们设置字体大小18fp,字体加粗,文本居中对齐,修改字体颜色为蓝色,另外同样的也可以设置背景、边框、边距等等属性,篇幅关系这里就不再一一演示了,大家可以实际操作一下就很容易掌握文本组件的使用了,开发过程如图所示:

1.gif

2.2、图片组件

从组件库中拖拽一个图片组件到垂直容器中,在属性栏中设置宽高都是80vp,上外边距设置为50vp,缩放类型这里选的是填充,数据源选择我们提前在素材库中准备好的图片,可以看到图片组件的使用也是比较简单的,如下图所示:

2.gif

2.3、弹性容器

接着从组件库中拖拽一个弹性容器,弹性容器的主轴方向是可以设置为横向或者纵向的,这里我们设置的是横向排列且元素不换行,那这样咱们的主轴就是横向的,接着设置主轴和交叉轴的对齐方式都是居中。设置宽90%、高50vp,上外边距80vp。然后内部拖拽一个文本组件和一个文本输入框组件,这两个组件会成横向排列,设置一下这两个组件的宽高和边距,具体步骤如下图所示:

3.gif

2.4、横向容器

横向容器和垂直容器类似,一个是纵向的一个是水平方向的,它的主轴就是水平方向的,交叉轴就是垂直方向的,这里设置主轴和交叉轴的对齐方式都是居中对齐,设置宽90%、高50vp,和上一小节中的弹性容器保持一致,另外设置它的上外边距是10vp。然后在内部同样的是拖拽了一个文本组件和一个文本输入框组件,并且设置了这两个组件的尺寸,操作如下图所示:

4.gif

2.5、文本输入框

前面两个小节中我们在弹性容器和横向容器中都拖入了文本输入框组件,文本输入框组件可以输入相关内容,在属性中可以设置提示文本、输入框类型及提示文本的字体大小颜色等,在用户名一栏的文本输入框组件由于是需要输入用户名信息,这里输入框类型选择默认的即可,即:基本类型,下方的密码一栏的输入框由于是需要输入密码,所以修改输入框类型为密码类型,并且默认提供了“小眼睛”,即:显示隐藏效果,最后我们设置最大输入字符30,这里做一下输入内容长度的限制,步骤如下图所示:

5.gif

OK,由于篇幅原因,本篇就介绍到这里,我们下一篇继续介绍下半部分的使用。

下期再会!

标签:容器,输入框,HarmonyOS,设置,组件,文本,拖拽
From: https://www.cnblogs.com/mayism123/p/17846230.html

相关文章

  • vue3 ts 父子 组件小例子
    <project-tabref="projectTabRef"v-model="form.projectVO":data="parentToChild"@update="updateHandler"></project-tab>//引用组件constProjectTab=defineAsyncComponent(()=>import('./tabsProject.......
  • vue实现会议室拖拽布局排座
    会议室拖拽布局排座是vue-draggable结合vue-draggable-resizable-gorkys进行开发vue-draggable是拖拽组件,可以在组件里拖动排序,也可以多个组件之间拖动排序vue-draggable-resizable-gorkys是一更强大的拖拽组件,可以随意拖拽,有点坐标先进行会议室的布局然后对某个会议进行人......
  • 界面控件DevExpress WPF流程图组件,完美复制Visio UI!(一)
    DevExpressWPFDiagram(流程图)控件帮助用户完美复制MicrosoftVisioUI,并将信息丰富且组织良好的图表、流程图和组织图轻松合并到您的下一个WPF项目中。P.S:DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着......
  • 解放VSCode+Vue的完整组件库智能提示(包括ant-design-vue、element-plus等)
    解放VSCode+Vue的完整组件库智能提示最近因为一些原因从WebStrom转回VSCode,首先感受到的就是组件库没有智能提示了:这能忍吗?根本不可能!接下来,我带你花三分钟找回遗失的智能提示~首先,本篇文章适用于通过unplugin-vue-components自动引入组件的项目;也就是说,在你的vite.config.js......
  • Istio从入门到精通—— Istio 的主要组件
    Istio的主要组件 Istio主要由控制面组件和数据面组件组成。Istio1.20.0(https://github.com/istio/istio/releases/download/1.20.0/istio-1.20.0-linux-arm64.tar.gz)默认安装的组件如下:EnvoySidecarproxiespermicroservicetohandleingress/egres......
  • vue2+element+vue-quill-editor实现富文本框组件(使用链接引入视频+上传本地视频+上传
    参考文档:https://www.duidaima.com/Group/Topic/Vue/12272前提不赘述,npm引入插件并全局导入 components文件夹下创建ArticleEditor.vue:<template><divclass=""><!--富文本框--><quill-editorref="myQuillEditor"v-bind:va......
  • 14、Flutter Card组件
    Card是卡片组件块,内容可以由大多数类型的Widget构成,Card具有圆角和阴影,这让它看起来有立体感。Card实现一个通讯录的卡片classMyApp2extendsStatelessWidget{constMyApp2({super.key});@overrideWidgetbuild(BuildContextcontext){returnListView(......
  • 简单的低开编辑器(一):实现组件渲染
    好家伙, 项目目录如下:该项目使用Vue3,Element-plus 效果图如下:  开搞:1.写出简单界面App.vue<template><divclass="app"><Editorv-model="state"></Editor></div></template><script>import{ref,p......
  • 在Vue3中使用Element-Plus分页(Pagination )组件
    在Vue3中使用Element-Plus分页(Pagination)组件开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中。记:在Vue3中使用Element-Plus分页组件与表格数据实现分页交互。开始实现引入表格和分页组件的H5标签。<strong>Element-Plus分页组件使用</strong><div> <el-ta......
  • 前端学习笔记202309学习笔记第九十八天-vue2-动画特效和常见组件库3
     ......