00:00
好,下面呢,我们来写我的页面。好,这一次呢,我们会采用第二种方式去大家去完成,它采用的是可视化图形编程工具来完成这个代码。诶,当你使用了这个可视化编程工具啊,你会发现用起来非常的easy,而且很轻松就能掌握了,可能你之前诶,我们只是给大家介绍了一下它基本使用,那么这节课呢,我们叫大家去。基本掌握了它的一个用法。好了,我们先从简单的啊这个卖。这个页面画起,后面呢,我们还会再发画一些复杂的页面,那么通过多个页面练习,我们一定可以更好的掌握它。好了,下面呢,我们继续啊,把这个图片呢,我们先截一个。对吧,那么方便我们去参照化。整个页面结构呢,也不复杂,非常简单,就是上中下啊这样几个结构,所以下面我们一起来看怎么办。
01:00
打开apilo的这个工具啊,我们呢,找到对应的这个页面,慢页面点击左上角这个类似于这个笔一个尺子的一个这样的一个图标啊,点击它就会进入可视化编程工具的页面。整个页面呢,分为这几块区域,左边是我们组建的一个选择区域,对吧,下面是我们生成的整个大纲数,就是组建的一个层次结构的一个信息,中间是我们编辑的这个页面的一个预览效果,右边就是给给当前组件添加事件啊,添加这个样式啊等一系列内容。好,那么下面呢,我们就一起来操作它啊,怎么办。为了更方便的去操作整个页面呢,我们先找到这个save area,把它高度呢先调为百分百。这里要特别注意就是输完高度之后呢,记得按下回车,它才会生效,否则是不生效的。一定要注意啊,很多人呢,可能在一开始的时候不记得按回车,导致你写了白写了。
02:04
同时为呢效果更明显一点啊,我们给它一个背景色,往下滚动,可以看到一个背景字样,在背景这里呢,有个颜色,这就是调整背景色对吧,然后可以背景图啊,它的一个各种内容都可以调,我们只要调个背景色为一个,哎,比较。比较显眼的颜色啊,粉刺,然后一定要记得调它的一个透明度百分百,否则它这个透明效果,透明效果就跟没调一样啊,那效果就很不好看了。好了,现在呢,我们这个高度百分百一个背景色粉色就出来了。好,出来之后呢,这个文字啊就可以删掉,我们用不上,我们接下来呢,要给上面一个容器,它的背景色是白色,同时它有两项内容。这里呢,我们找什么组件呢?三种组件类型呢,其实之前也说过啊,UI组件它包含的组件呢,其实就是带一些特殊的样式的一些组件。而高级组件里面呢,是带具体的功能的组件。
03:03
系统组件就是一些普通组件,它没有任何没有其他的一些像就是那些特殊的样式的效果。所以说如果你这些样式都是要你自己定义的,那么我们建议你用系统组件,如果说你想快速一点,就是很多样式都不想自己写了,你可以用UI组件,因为它预定的一些样式就会比较方便,同时有一些特殊的组件呢,能让我们用起来非常的更加啊方便一些,但是我们这里没有什么特殊功能啊,所以说我们用这个系统组件就好了,其同一个组件在这。那么入组件呢,我们能看到整个入呢,它是有一些精细的,很明显,同时有背景色以及呢排列,排列方式是靠右布局。OK一点调整啊,首先选中这块区域,在右边进行调整它的样式。一上来就看到布局啊,布局的话呢,我们可以调就是这个主轴方向,它默认是水啊,这个垂直排列,我们调第一个它就会水平排列,同时第二个呢,主轴对齐方式,它默认是靠左对齐,而我们要调第二个flash让它靠右对齐。
04:09
然后呢,往下走,下面这里就调pening和marin,在这里调啊,我们有个pending,但是pending的值呢,它不是都是一样的,而是上边是十,下边是20。这样的一个进去,那么如果你直接在这调偏里,调偏里的话,我们能看到啊,往下走一点,在这里呢,是这个左上和右,它是个静止的,同样不能写,只能写这个下。这是因为一旦你写了下,它会自动的把上左右都设置为和下一样的一个值。但是我们希望下大一点。对吧,上左右小一些,那么这个时候呢,就需要怎么样呢,就需要去掉这个图标。底下诶,我们会发现它变成一个灰色,变成灰色之后,我们可以指定啊,四个方向的这个颜色了。这个不这个大小了。
05:02
单位可以不加啊,它会自动使用单位的,OK,这样呢,就是上右左都是这个十,下是20。所以说如果你希望四个方向一样,那么这个图标就高亮就完事了,对吧,那么你如果希望四个方向它有些不一样,那么就底去掉这个图标,然后呢,再去,呃,现在操作。好,然后呢,还有给他个背景色啊,往下走,下面有背景,给他个背景色是白色FFF,然后呢,透明度是百分百回车,那么就可以生效了。接下来里面呢,有两段文字,我们往下走,下面的有这个展示组件啊,其中有这个T文字。啊,第一个文字呢,我们设置为这个设置。先投两个文字进去再说啊,第二个呢是叫客服。好,它们呢都是加粗啊,最大小的稍微大一点,我们最大小的调为16PS啊然后呢加粗。
06:04
在这个编程工具呢,这里要特别注意,就是它自己大小,默认的都感觉是10PS这样的一个大小,感觉是这样的啊,而我们我们如果写的代码的话呢,默认这个式它应该是16PS这样的大小。所以说我们还是自己指定一下这个大小可能会好一些些啊,不然的话呢,它可能呈现的效果会不太好看啊好16PS呢,在自重这里可以对它进行加粗,如果要改颜色可以改颜色啊。那么设置呢,样式其实和客服是一样的,所以说你就不需要再写一遍了,为什么呢?因为一旦你给客服写的这个样式,它就会自动的生成一个类,名叫T杠一。当然将来你再设置就会T杠二,再设置test杠三,以此类推了啊,反正这个test杠一这里写了这个就是客服的这个样式,我们选中设置在这里可以选择这个test杠一,诶那么样式就一样了,就不需要你自己再去写了啊,这里就达到一个样式的复用的一个目的。
07:01
但是我们之间也有一些间距呀,对吧,所以我们再来到设置给它加个Mar right为为这样一个20撇。因为只需要右边具有,所以还是要把这个图标给去掉,在这里加个20,所以说啊,那么这就生成了,这时候呢,你但凡给任何组件指定样式,它都会给它生成一个独有的类比。所以当前这个T组件啊,设置它其实有两个类比,一个T杠一,一个T杠二,其中T杠一呢是调整自己大小和字体加重的,那么test杠二呢是调这个边距的,所以大致上是这样的一个情况。好了,那么头部这里咱们就设置好了是不是。诶,这个时候我们发现呢,它这个c area呢,它这个上面没有空隙啊,下面这个咱们的碳坝区也没出现。这是因为使用可视化编程工具呢,只能看到当前页面的情况。啊,一旦我们放到那个真机设备上呢,自然就能看到它的不一样的,所以说它现在没有上面这个边距,下面这个这也没关系,这是正常的啊,这正常的,但是我们一旦在真机设备上去测试的话呢,肯定是能看到它的不一样。
08:11
好,然后下面呢,我们再来整啊,下面又是一块区域,左边是个图标,右边是一个这个文本。来,再来一个区域,这个区域呢,就不需要背景色了,它就是整个图标,一个文本,同时有一个这样的喷效果。我们呢,给他拍点价格。找到选中这个区域啊,加个十,因为他们上下左右都是一样,所以说就一个十就好了。然后呢,他们之间要水平排列啊,所以说我们这个主轴方向得是肉,这样它才会水平排列嘛。OK,然后呢,我们找到下面这个组件啊,找到展示组件中的图片,发个图片进去。图片呢,不要这么大,所以说我们给图片给个框,记得回车啊,给个章。诶,图片它的大小就小了,然后我们要设置图片,它是哪个图片,要来到属性这里进行设置,在这里可以设置组件的SC啊,什么place holder等这些。
09:07
效果啊,往门里里斜看,这里斜看来到image下面的麦。那下面是哪张图片呢?我们可以看一下啊,那下面呢,有很多图片,其中alva就是我们想要的这个,呃,图标,所以说就是al点偏距。What?呃,我们看看有没有写错。艾特的偏距。Image下面的慢下面的偏距好了,这时候呢,咱们在诶。怎么突然就没了,我们看看刚刚是不是它出现了一些问题啊,我们再来写一遍。下面的特点,偏距。OK啊,这时候就OK了啊,图片也就来了,那么它有个圆角啊,那个样式你去调圆角往下走边框,这里有边框的圆角。
10:07
一样的,你这个图标在的话呢,它就会调四个方向的,你不在的话呢,就可以自己指定相应的每个方向的,我们呢,它是个圆啊,所以说四个方向50%就好了。好到这里呢,我们这个图片就调整好了,非常的简单。那么右手边还有一个文字,我们再拖一个文字图片,把它内容呢设置为骨粉。OK,那么文字就出来了。呃,设置完之后呢,我们把它的大小呢调大一点,这个文字呢,明显会比之前的这些文字会更大一点,所以说我们调成20,然后呢,把它字体加粗一些。同时跟左边有个左边距啊,只要有个左边距就好了,所以说把Mar点掉啊,一个左边句式。好了,所以这一块的内容就非常轻松的搭建出来了。
11:00
下面呢,我们继续搭建啊,下面有一个区域。不。整个区域呢,它是分为上下两个结构,所以说它不需要水平排列,上面这个结构是我的订单到全部订单,下面是四个五个这样的一个图标。好呃,所以说我们还需要给他再投一个标,上下两个结构,那么上面结构的话呢。呃,先不调啊,整个这个这个这个容器应该有一个圆角,有一个外边距有一个喷顶,这个我们忘记设置了。来这个时候呢,我们因为我们又在view里面偷了个view啊,所以这时候我们选择这个view,到底是里面这个view还是外面这个view就不太不太清楚了,这时候就可以看大纲数啊,大纲数这里显示的非常清楚,我们可以折叠一下三个view,当你选一到时候我们能看到在这里能看到一些绿色的虚线,说明我们现在。就是这个区域啊,就是这个区域,如果你实在不知道哪个区域,你可以点击这个图标把它隐藏掉,隐藏显示,这样你也知道是哪个区域了,是不是好,第二块区域呢,就是我们那个logo图那个骨粉那个区域,那么第三块区域点它就是我们要要操作的这个view了。
12:16
底看那里面我们又拖了个view啊,我们要操作外面这个view,它Mar pen都要给个十。然后同时要给个背景色和一个圆角,圆角的话呢,给个十,背景色的话呢,是个白色。然后呢,他呃,这个体重是百分百。这样的话呢,我们就能看到这个区域就呈现了。所以说呢,我们如果说就是多个元素陈列在一起,不好去选的话呢,可以在这个大概数里面去选,这样的话呢,也会非常轻松。好,这时候呢,这个距跟上面距离还是有点大啊,所以说我们让它上边距就不一样了,上边距不要了。所以我们在调这个view的这个马的时候呢,我们要去掉它上面这个是零。
13:02
啊,下面这个是例。这样的话,那他们直接就不会隔得太开。好了没问题,我们就来调里面这个view啊,就是这个我的订单和全部订单的这个。我的订单和全部订单的话呢,他们是水平排列前指的是space between,所以我们要把它主轴方向调为肉啊,同时主轴对齐的话呢,是space between。这样呢,我们拖拽的内容它就会一左一右的去排列了,左边是一个文字啊,我们拖一个文字组解。文字呢,叫我的订单。对吧,好,那么我的订单呢,很明显这个文字是加粗的大小的和骨粉。稍微小一点点吧,所以说我们把它大小的调为比如说18或者是16啊,都写16吧,然后加粗一下。OK,那么左边我的订单就产生了。
14:01
右边呢,还有一个全部订单和一个图片图标组成啊,和一个图标组成,所以说我们在拖的时候呢,我们还要拖一个view,因为它有两部分组成。投币进去,诶在这啊在这,然后呢,先拖一个文字过去。文字OK在这啊,那么他叫全部订单。对吧,同时它的大小呢,大小是12,颜色呢是个灰色,灰色的话呢,我们都用green来代替啊。好了,全部订单就在这产生了,对吧,全色全部订单就在这产生了,那么全部订单的右边还有一个这样的一个图标,要放一个图片。那么这个时候啊,你去拖拽就不太好去拖拽了,是不是你就不太好去拖拽到哪里,有时候就拖拽错了,就会拖拽到了一些错误的位置。对吧,比如说诶不小心拖拽来错了,它就会不支持这个这样添加,那这时候怎么办呢?这时候还是一样回到这个大杆数啊,因为我们在这里添加了个谬组件,所以这里一定有个谬组件,我们可以直接把它塞到这个谬组件里面去添加,这样呢,它就会在这个缪里面添加一个image。
15:16
所以说当我们这个容器调的比较小的时候,要往里面加元素啊,那么你去这样拖拽添加不方便,所以就可以在大概数里面拖拽添加。当然了,大概数你要非常清楚你这个页面结构啊,这样的话呢,才好添加。好了,呃,我们这个图片的话呢,它的宽高呢,应该是小一些的12就够了啊,记得两边都要回车啊。12的话呢,我们再给他指定对应的这个图片。麦下面的这个叫back的偏距,就是这个图标。好了,然后找到这个容器呢,他们要水平排列啊,所以说找到容器让它水平排列,然后垂直方向呢,是要居中的,对吧,然后整体整个容器。
16:06
也要居中,这样呢,他们就全部都居中对齐了。同时找到这个文字呢,我们可以加个来个5PS啊。因为只要margin right,所以说把这个点掉那个五就好了。好,到这里呢,我们就完成了这个头部的布局,你看是不是挺轻松的。改颜色、改大小、改间距。啊,然后呢,让他通过flash布局,让它啊水平排列对吧,什么space啊,或者是说啊怎么样都可以。好,接下来呢,我们继续拖拽啊,下面又是个谬区域,同样的在这里拖拽的话呢,你可能拖拽的区域会拖错啊,所以说我们还是一样会找到这个大纲数给直接给这个谬,给这个谬加啊,给这个谬加。这样的话呢,就不会容易出错了,在这里这个view好,View里面呢,它都是由各种view组成啊,由各种view组成六头的view,每一个view呢,都是由图片和文字组成,所以说view里面又套view好,这个view的宽度呢是占20%的。
17:10
很明显是20%,因为他占五份,那不就是20%。对吧,好呃,然后呢,这个密区域呢,我们来去操作一下啊,它呢需要整个图片。喂,图片来了,图片大小呢,我们调小一点。30应该就够了。同时把那图片加在上了。好,第一个图片呢,对应的是叫这个payment的偏距啊。喂,诶就是它啊,就他没错,这个同学来了,然后呢,还要给这个容器呢,继续添加一个文字。
18:00
这里因为这个区域比较大,所以说我可以快速的拖拽了。叫待付款。喂,那么做完之后呢,这个文字呢,它应该要。大小是12吧,应该是没有问题的,大小是14,然后要不要加粗一点点呢。好吧,就这样简单设置一下。然后整个内容呢,应该是一个居中的,所以说我们选择外面这个容器啊,让它居中对吧,居中对齐,然后容器距上面呢,应该是有些间距的,不至于什么间距都没有,所以说我们。给他一个10PS的一个间距。好了,那么接下来就是选中容器啊,复制N分。啊,整个容器呢,还有水平排列啊不之分。对吧,然后接下来呢,我们去一个个去改,改它的名称,改它的这个。
19:05
看他的图片。在收货的话呢,图片是叫re receive啊收嘛。RECEIVG。好了,然后下一个呢是叫待使用。那图片的话呢,是这个叫use。下一个呢,图片是叫evidence。我先把图片都改一下吧,最后一个是将放的。好,然后呢叫待评价。在退款说。好了,你看咱们这里就把它所这个组件的内容呢给搭建完成了,其中这个文字呢,其实可以距上面稍微有些麻。
20:07
然后去一个这样的5PS的一个。对吧,然后我看一下它的样式,是看它样式是T7对吧,那么这里我们还是要加这个,可能之前复制没复制好啊。我们如果一上来都调好的话呢,可能这个就简单了。啊。好了,那么到此呢,我们就完成了这个总结的一个内容,是不是。哎,下面呢,我们就可以在咱们的这个设备正机设备上进行预览一下啊,预览一下来一起来看。我这里呢,有个已经手机投屏了,那么现在我们看到这个页面呢,还没有任何内容。原因就是因为呢,我们通过可视化编程工具呢,编程完之后呢,还需要你右键自己去增量同步一下,它不会去自动同步的,所以说我们需要增量同步选中我的。
21:09
诶,这时候大家看页面啊,是不是就和我们开发的这个页面效果基本一致了。对吧,那么最后呢,我们要做的就是把这个背景色,整体的这个背景色给去掉,诶咱们不需要这个pink背景了,拜拜了。好了,所以一样的改了,代码呢,需要增加同步一下,那么我们在真机设备上才会看到相应的效果。好了,这个呢,就是我们整体的一个。呃,一个设计。当然呢,我们这种方式是自己一点点去写的这个结构样式啊,那么还有一种方式去做,就是它提供的高阶组件。高级组件呢,它直接就提供了,在哪呢?大家可能要翻一下,不是标题,答案是这个导航这里。
22:00
呃,导航栏这里,我们把这个真机设备移到这里去啊。好了,这里有个什么呢?我们往下走,诶,这里有个我的订单。一上去啊,它可以自动的一键生成这个我的订单,非常的方便。所以说如果你自己一点写觉得费劲啊,也可以直接用他提供的这个高级组件。高阶组件呢,就是一上来就提供了绝大部分的结构和样式,甚至还可能具备一些功能,按照要求去设置就好了。所以说如果说你对这个结构,对这个结构样式没有说需要大方面的调整,只要大概有这个样子,那么你可以直接用这个高级组件,高级组件的问题就是对这个样式的监控把握呢,是不太好去设置的。比如说我们拖拽上去,诶它的样式呢,基本上就定型了,如果要改可以要去改这个高级组件的源代码。高级云代码,而在这个上面呢,它提供的你看像诸如字体啊,边框啊,这些背景啊,都不能调整。所以说这是它的一个小的问题,但是优点就是能够快速的生产。
23:03
我们可以在属性这里啊,去改它的图标,改成跟我们之前一样的就好了,点点斜杠。写上image,下面的这个叫,呃,第一个是叫payment。偏距。好呃,然后呢,我们可以复制多份啊去改,然后第二个呢是叫。呃,叫什么来着,我们看一下啊。第二是叫recipe。我先全部复制一下,待会一点也改了。第三个呢是叫use,第四个是叫。第五个是叫。呃。被放,然后呢,这个这个文字也可以改,待付款待收货。
24:00
待使用。待评价。退款售后。好,只是我们改了这么多的话呢,其实你会发现它这个图标好像并没有发生变化啊,这个就是它这个高级组件的一个,可能是说是一个大灯,或者说是一个啥啊,就是他在这里没有去显示,但实际在蒸汽设备上是没有问题的。实际的蒸汽设备没问题,同样的要右键增量同步一下。你看在真机设备上呢,我们看到这个图标的确和上面变成的是一模一样的,但是在这个预览的话呢,它好像没法去得到这个更新。是这样的,蒸汽设备是没有问题的。好了,呃,所以这里就是我们的一个调整,如果说你就想改这个组件的样式,这里要说一下高级组件呢,我们可以看到这个代码页面,代码我们可以看一下。退出这个编辑模式呢,上面就是它自动生成的页面代码,而下面就是它的样式,而高级组件呢,它就是在这里会引入这个组件,而这个组件在这个卡下面进行导入了,就这个hoc这个高级组件啊。
25:14
呃,高点主机的话呢,我们如果要改样式的话,就得手动修改了,对吧,比方说我们对这个pending marin不是。不是15而是十啊保存对吧。给到我的,哎,它就是十了,然后圆角的话呢,我们也得是这个border radiOS来一个10PS。好了,同时为了它每次刷新是我的页面,我把这个调为二,这样呢,每次刷新就是我的页面了。OK,它的圆角也有了,是不是,然后呢。里面这个什么图标效果呢,这个样式你也可以按照要求去一点点去啊改变就完事了,对吧,比如说这个图标啊,咱们太小了,我们看看啊改成30。
26:06
哎,它是不是就大一点呢,是不是啊,这个轮子太强了,你可以改14,然后呢,那个marin top来到。对吧,这样就可以改啊,所以说就是如果我们要改样式的话呢,得进入这个高级组件内部去手动的修改。就是个最终也可以完成我们想要的效果。好了,以上呢,我们给大家体验了一下这个。可视化编程工具啊,怎么去完成一些页面。那么未来呢?我们把这个数据云搭建好了,我们再让大家体会怎么去搭建其中的功能。
我来说两句