00:01
下面我们来给大家介绍啊,咱们可视化编程工具中的组件,我们要了解到组件有哪些分类啊,以及每个类别下面基本上组件怎么去使用。我们下面一起来看啊。打开可视化编程工具,找到我们DEMO1,然后呢,把容器呢,我们改成CS对吧,然后呢,给它一个类名,给他一点样式啊,那么接下来我们就进入可视化编程工具,在这里面进行开发。它的组件呢,主要分为三大类,系统组件,UI组件和高级组件。系统组件呢?它里面包含了一些我们之前学过的所有组件,那么它仅有一些基本功能和一些结构样式。而UI组件呢,可以理解为是在系统组件的基础上做了一层封装,提供了更好看的样式和更多的结构。啊,它可以独立看成一个完整功能。而高级组件呢,是在UI组件基础上又一层封装了,提供了更加强大的功能啊,更加完整的功能。
01:03
那么我们再说通俗一点啊,我们可以说系统组件呢,就像是我们做菜一样啊,它的一个原材料,它还是盐,它还是味精,它还是酱油,对吧,这个鱼呢,还没杀死,还是活鱼等等。那么UI组件的话呢,它就是把这些啊菜呢已经切配好了,对吧?把我们的鱼呢给杀了啊,然后呢,把里面的东西都掏干净是吧?然后呢,腌好腌制好什么的都做好,那么是UI组件,而高级组件呢,就是把我们这个菜呀,这个鱼啊全都炒好对吧?经炒好的成条鱼那么可以直接吃了,那么这是高级自己。所以高阶组件的功能呢,是最完整的。UI功能呢是其次,那么最差的呢是系统组件。但是从另外一种角度来讲啊,系统组件呢,它的可是定制化需求呢又更强,王东可自己去写这个解构和样式对吧?而UI组件呢,它已经完成了一部分的结构样式,所以定制化程度呢就会更更少一点,而高级组件呢就更差了啊,它呢基本上已经固定好了这个结构样式,那么你想调整的话呢,就会比较麻烦。
02:12
所以呢,如果开发项目开发,如果咱们对咱们项目呢,有高度定制化的需求,那么建议你用系统路线。好,如果你希望开发的简单一些啊,对吧,并且你的风格呢,是符合UI组件的一些样式风格,那么你可以直接用UI组件,这样呢,你对样式上呢,可以调整就更少一点。那么你还想再简单一点,你想功能呢,都直接生效对吧,想那样式呢,我也没有太大的影响,我能用就行,那么高阶组件,那么就是最符合你的一个习惯。曾经这三种组件呢,对于三种不同开发模式啊,可以满足你从最初级到高级的需求,那么都一一对一,所以你要自己认真的一个选择。好,我们大家一点点去用啊,比方说我们从系统组件开始,一点点大家去看一下这些组件的用法,那么组件用法呢,就是我们要用一个组件,就是我们先看到某个组件,然后拖过来就可以用了,那么用的是个容器组件,对吧?容器组件都是通过容器然后去使用的。
03:17
它有很多很多组件,这些组件呢,对应的功能啊,和我们之前介绍的主机的功能是一模一样的,只是现在我们用的话呢,可以拖拽功能用,对吧,比如拖过来就有个U。好,我要轮播图的话呢,得拖一个swaer,诶就会有个轮班图,但是轮播图里面需要放swaer item才会形成轮播图组件,那轮播图组件呢,它要渲染图片,我要拖一个image图片上去。哎,这时候呢,它里面就会嵌套很多结构了,好,这个结构在这里可能不好观察,那没关系,咱们有大纲数。网端点开大概数的view里面呢,就能看到,诶我们放的这个swaper组件,Swaper点开里面swaper item组件,当然呢,这个这里要拉宽一点啊,S外拉这点开这里又发现image组件,所以在大纲数这里,我们能对我们的结构呢有非常清晰的展示。
04:07
好,那么图片它要调整地址啊,对不对,怎么办呢?那这时候就需要在右边进行调整。好,右边呢,我们可以给咱们图片的定义一些样式类名,可以设置它的布局,它的宽度和高度,它的这个flash布局的一些方向等等,还有pen Mar这些内容,那么这些相应的内容样式操作呢,我们在下一个环节呢,会着重的介绍啊。那么这里呢,我们就不去细节的去异地调这个验式了,我们来到属性这里。属性这里呢就是调整组件的属性,那么其中我们这里就是调整图片的SC属性。比方说我们就用我们之前图片啊,那么路径还是一样,要至少回到两层,然后去位置路下面找我们之前用的图片,一个1.jpg,诶这个就是我们图片对吧?那么我们看到这高度呢,很高,咱们可能不想要这么高,那么样式这个高度这里就要调一下啊,你可以自己指定的高度为多少。
05:06
100可能不够,那可200 200不够可以300对吧,可以自行调整啊,宽度度百分百,那么外和T呢,调了之后记得要回车才会生效啊,这里要注意。好了,UI组件一旦用了之后呢,我们就可以选中这个swa item,因为龙波图呢需要有多个swa,选中swa item,然后点击复制,可以同时复制生成多个这样的轮播投组键。好,这里就复制生成四个,那么我们要做的就是找到里面的图片啊,把图片的属性呢,地址啊改成啊别的图片,这样的话呢,咱们就能看到不同的图片了。对吧,不能他一直轮播一张啊,这样就比较不太不太行啊,对吧,我们需要轮播不同的图片。好,这样呢,它就能播到不同的图片,当然咱们这个效果的话呢,使用的主角效果啊,在这儿呢是看不到的,你想要看到效果的话呢,必须要真机测试啊,我们呢需要把代码呢进行全量编译。
06:04
对吧,然后呢,我们再打开我们的真机这个设备上,诶比方说咱们现在这个整机设备就打开了,那么在右手边呢,我们就看到这个轮播图的效果了,你看是不是叫做轮播呢,对吧。好了啊,这里是轮包图组件的一个基本用法,除了轮波图组件以外呢,系统组件里面,它轮波图组件属于容器组件,还有我们之前学过的表单组件,还有用来展示文本,展示图片的展示组件等等,那么这以上呢,是系统组件。那么系统组件呢,之前我们主要学习过,所以这里呢,我们就不做过多介绍了,我们下面再看一个封装程度更高一点的UI组件,UI组件呢,里面有基础的一些按钮啊,列表,有数据展示的卡片啊,通告栏等等,有数据录入的文本框搜索等等啊,有反馈提示一些内容的反馈组件,有布局导航组件,有实验性的一些组件,那么在这里都有。
07:01
留到金属组件里面呢,我们有按钮,想用按钮拖拽过来,诶立马就实现按钮,这里要是呢,有Mar,那么文字居中还是白色,整体颜色呢,是咱们的这个平台的这个这个主色量,那么看起来呢,还是相当不错的是吧,那么立马就实现了一个按钮,而不是需要你自己一点点调整。那么比方说数据展示这里呢,我们可以用上一个卡片,诶,立马就有卡片,那么这时候呢,可能有同学想调整卡片标题,卡片内容没关系啊,一样的来到右手边找到属性title就是卡片标题出就是它的一个子内容。怎么调呢?首先找到这里,点击右手边这个内容。它默认的会绑定一个变量啊,如果我们不想绑定,就是点击解除绑定确定啊,那么就解除绑定呢,解除绑定之后呢,我们就以自己去设置,这是一段标题。那内容就变了,那么那文本内容也是一样,你不想要的话呢,可以解除板栗对吧,解除板栗,解除板栗之后呢,在这里可以改,这是一段内容。
08:07
好,这样呢,就会快速的生成一个卡片组件,你看是不是非常方便,当然除此之外呢,还有很多很多组件,对吧,那么这样呢,我们呢,就不会去一一给大家去一点点测试了。我们的希望就是大家在实际过程使用的过程中,就可以立马掌握它的用法,因为它本身用途并不复杂。每一个都没有特别复杂,无非就是它呢有些组件属性,你呢,要么去原代码里面啊,第一第二种方式就是点开退出啊,在这里面呢,我们看到它定义的一些变量对吧,定些对塔数据,要么你是在这里直接改这个数据的值。改值,然后再进去,那么这时候我们能看到他的内容就不一样了,要么就跟我们之前一样,解除绑定,自己给他设置新的数据,那么两种做法都行。好了,这里就是UI组件,它提供了一定的结构和样式啊,但是功能呢,还是比较少的。
09:01
那么下面最好的就是高级组件了,它提供的组件呢,就非常的多了啊,那么基本上我们开发一个这样的小型的一个电商网站上面的功能呢,它基本上都应有尽有,有包含标题类的,有导航类的,咱们的这个回推啊或者导航啊,有表单类,有列表类,有图片展示类,有文本类,有搜索,有提示,有其他功能类的组件,那么非常多。比如说标题内组建呢,我们来看一下,我们呢,可能需要一个一上去呢,就能看到这个我们组建的一个一个效果,对吧,像我们去看一个文章的时候呢,很多时候标题就长这个样子,对吧,上面一个标题,下面是文章的一个时间,你看立马就把你实现,你都不需要关心太多的细节,非常的方便。那么导航类呢,也可以快速的实现各种导航,比如说底部的咱们的tab导航啊,还有头部的导航,它都可以快速的实现,那么你要用的就拖过来就可以实现了。
10:00
是不是啊,拖过来就可以用,比如说名师团队,咱们拖过来,诶下面就有名师团队的,是不是非常的方便。好,还有呢,往下走还有一些什么表达类啊,列表的呀,这些还是一样啊,我们呢,没办法给他一一测试,那么我们需要用的时候呢,我们就要拖出来,立马就可以实现这个功能,非常的轻松。如果你自己实现,不是说自己实现不了,但是会很麻烦,对吧,这样的立马就可以把一个快速功能就可开发好了,所以非常的轻松方便。好了,那么以上呢,就是这些组件的基本用法,那么大家的话呢,你可以自己啊,在这些组件中挑选你中意的组件,对吧?可以尝试去用一用,甚至你就利用这些组件去开发一些项目,开发一些功能,那也OK啊,那么这些组件如果你要修改结构样式,那么你需要点进去啊。当我们用上一些UI组件,或者是这些呃,系统啊,这些高级组件的时候呢,它会在我们的component目录中引入主机代码。
11:03
在这里再把这个组件的引进来,然后在上面直接使用,所以你要去改组件代码的话呢,你得拿到这个组件内部去点进去啊,在这里面你要去分析它的这个主机的结构和样式,然后呢再相应的去改它的内容。再改内容,那么需要这样,所以相对来讲呢,会稍微麻烦一些,那么一般我们如果用高级主机的话呢,通常情况下诶就直接用了,对吧,我们就尽可能的不要去改动它的一些内容。好了,那么以上呢,这就是我们的一些不同组集的用法,诶,接下来同学们啊,就可以自己快速的去运用。
我来说两句