00:00
接下来呢,我们来完成订单列表,同样的使用可视化编程工具去完成它,打开原型图,找到这个奥利这个页面。缩小一下。我们截个图。OK,那么接下来呢,我们就去完成它,打开我们的编程工具啊,找到奥德利这个页面,然后呢,我们点击这个可视化编程工具,对吧,进入进入里面,下面我们就去编辑它。整个结构呢,也非常清晰啊,就是这里有个全部订单,它固定在上面,然后下面呢,是个可滑动区域。对吧,View是个滑动区域,然后呢,呃,这中间呢,中间这部分呢,也是可以滑动的,然后呢,每一个内容都是一块内容是一个卡片,卡片的头部分为左左右,卡片的中部,对吧,卡片的底部。好,下面我们一起来做啊,首先同样的给safe area我们加个百分百的高度,同时给他一个。
01:04
背景色这样呢,我们才能对比一下我们整个效果啊。OK,呃,高度这里我可能忘记。有回车啊,没问题,哎,这个颜色掐错地方了,不是边框啊,应该是这个背景色百分百。好了,那么我们这里就加好了,我们再回过头来看一下上面这个边框,这里OK啊,它这里不需要设置相应的颜色,然后这个订单列表,这个组件可以删掉,我们接下来去写上面这个。找到系统组件的T文本。我们给他来一个全部订单。OK,大小的话呢,我们为我们就把它调大一点啊。调到20,然后加粗。好的,那么全部订单就在这啊,然后呢,它需要稍微跟上面有些间距,跟下面一些间距,所以说我们给他调个magic。
02:07
上下就好,上下为这十撇子。喂,我们调了个上下10PS这样的间距,那么接下来呢,我们就去写下面这个列表,下面这个列表呢,整体是可以滚动的啊,所以说我们需要用上一个可以滚动的组件叫sc view。我们找一下。OK,整体是个VI,它的内容,它被内容撑开即可,而且它是垂直,垂直滚动,而且不需要那个。滚动条,所以来到属性这里啊,属性这里可以调它的组件属性,它默认是显示滚动条的,我们把这个值调为false,它就不会显示滚动条的,这是我们要调的,接下来呢,每一个内容都是一个滚动区域啊,我们写个view,这个view的话呢,有一个拉效果,下面我们来设置。Large为10PS pen呢也为10PS,然后呢,有一个背景色是白色,边框呢是10PS。
03:12
好的,那么我们这样的一个卡片呢,就生成了其中卡片里面再塞入作为上面这个容器。OK,那么上面这个容器的话呢,它需要放一个图片。往下走。图片放到这里面来啊,图片的宽高的话呢,我们定成50PS。OK,然后呢,我们来引入这个图片的地址。这个图片注意看啊,它是在哪里啊,注意看它在哪里,它在这个image下面,不在这个order里面,Order里面没有啊,在这个店家这里面,店家里面有一个。图片叫shop editor啊,就是这个图片对吧,所以说我们这里用这个图片得是这样写对吧。
04:05
点点斜杠点点斜杠,Image目录下面的shop shop下面的shop。点呃,应该是jpeg吧,我们看一下啊,是个jpeg。OK,回撤。好了,呃,有时候呢,这个图片我们能看到就是哎,刚刚好像是设置它又得出了问题啊,我们再次写一遍啊,Image下面的shop下面的shop。At。点JPEGOK,那么图片就出来了,右边呢,又是一段文字啊,我们再塞一段文字上去。同时他们要水平排列,所以说我们找到外面这个容器啊,把它呢调成肉,OK,这个文字呢,我们来写一下,它就是肯德基。
05:09
宅急送对吧,然后他后面就随意了,不一定要写的一模一样啊。然后呢,整个文字大小我们调成16PS。然后呢,给它加个缩。加粗,然后呢,跟左边有一个边距是PSOK,那么我们就把这个标题这一部分也写好了。好,下面接着又是一个容器,用来写咱们的,这个可以滚动的去啊。滚动的区域是一个横向滚动啊,同时要这里要注意就是这一块区域,它是要定位在这个位置的,它是要固定在这个,所以说整体是一个滚动区域啊,整体是一个view view下面呢,包含一个滚动区域和一个可以定位的这个语速,所以我们可以这样设计。来,我们先给他一个view组件。呃,这里还是一样,在这里不好给的话呢,很简单啊,我们打开sc view,打开这个view啊,给这个view直接加就好了。
06:07
好,它这里第二个谬组集就在这了,而这个谬组集里面呢,它分为两个谬啊,所以说我们还要往里面塞谬一个谬。呃,给看啊,它还要算一个两个view OK,那么前面这个view的话呢,呃,它就是用来做这个滚动区域的。对吧,那么既然做滚动区域,其实它用不用view都行啊,我应该用,我应该不要加view,应该加sc view啊,加sc view OK,看这个位置能不能调整一下,OK,加这个square view,一个可以滚动的区域,这个square view呢,很明显是X轴滚动的,所以X轴是出Y轴为false啊,X轴可以滚动,Y轴为false,然后呢,也不要显示滚动条,把它调为false。好所里面呢,又要放缪啊,每一个这样的个元素去滚动的。方用这个view的宽高是固定的,它不是百分百,这个我们可以设置它宽高的话呢,宽度为100吧,高度的话呢,到时候被内容撑开即可。
07:05
好,然后呢,我们再往里面塞图片。赛图片啊,图片的宽高我们都设置成100。好,这是这个图片,呃,图片的话呢,我们接下来再来调整啊,它需要写这个图片的地址,图片地址呢,其实也是image shop下面的这个故事,就是它的一个食食品啊,那么这里面的图片,所以说我们写这个路径的话呢,就可以找到属性啊,点点斜杠。点点斜杠,呃,Image下面的shop下面的goods啊,随便挑一张图片就好了,它的是jpeg。我们看看是不是JPG啊JPG。诶,一张图片就出来了,这个图片呢,是要有圆角的,所以说我们还要调它的一个圆角来一个10PS。
08:07
OK,整体的sc view呢,应该跟上面和下面都有些间距,所以说我们可以调一下它的一个。上线。OK,间距就出来了,同时我们图片这个图片下面的还得有东西啊,所以说我们因为这个容器比较小,所以说我们进去调整。那图片在这,我们需要给它下面再加个文字啊,再加个文字,文字的话呢,就叫什么啊展示。稍微。脆皮鸡啊,什么啥啥饭,我们随便加一些东西啊好了,那么这个文字呢,我们要设置的就是它文字要艺术隐藏,同时它大小的话呢,大概也是16PS啊。他呢要溢出隐藏,不能超出这个区域,对吧,所以说我们要对这个文字的内容呢,做一些操作。
09:04
那怎么做呢?我们要设置这个文字的样式,但是这些样式的话呢,我们能看到就是它这一块呢,只有什么边框啊,还有这个背景色,然后还有这个字体的一些内容,但是并没有艺术隐藏的操作,所以说我们要设置这个文字艺隐藏呢,我们必须要哎,必须要回到这个代码编辑这里去对它进行操作,找到这个TEST3这里啊,找到它在这里,我们给它加上这个艺术隐藏的一些内容。Test a direction weips。啊,不是t overflow。为ese艺术隐藏是一个省略号,同时呢,呃,Space we no RA不让它换行,对吧,Overflow hidden OK,那么达到这个效果之后呢,它就可以达到一个文字溢出隐藏的一个效果啊。所以说这一块呢,我们需要调一些具体的样式啊,在这里他没有办法去做,那么我们就得自己去写一些相应的样式,对吧,甚至我们可以把这些类名,如果将来还有其他地方使用,我们可以把它定义成一个独有的类名,然后将来去直接引入使用即可。
10:15
是不是?OK啊,那么这样呢,我们就形成了一个view里面形成了一个view的一个组件啊,我们多复制几份,OK,那么多复制几份就看出来了,Sc view呢,我们应该要水平排列,同时他们跟右边应该有些间距的,所以说我们在设置这个六组节的时候。那后面的我都删掉了。哎,选错了,估计。来,呃,下面呢,有多个view啊,我们。删掉一个。再选择一个啊,给他先给他整体。给他整体先加一个marin。来个10PSOK,加好了之后呢,我们再复制几份啊。
11:01
对吧,那么这个滚动器在这里是看不到效果的,但是我们未来在其他地方是在那个我们手机上是可以看到效果的。OK,然后这个全部订单这里呢,他这里我们也看到他这里应该有个边距的啊,我们也忘记设计了,所以说这一块我们也给他一个边距。对吧,这个十这边也要有个10PS好,那么我们现在其实就可以通过真机调试啊,去看一下咱们的这个效果有没有,呃,这时候呢,我们要打开代码这一块啊,我们要增量更新一下。OK,打开我这个内容找到订单,诶大家就能看到啊,它这个水平滚动是没有任何问题的,生成的效果就大概这个样子。没啥问题,好,现在呢,我需要给他再加上其他内容,OK,这一块就先暂时不看了啊。我们把它收起来,我们接下来呢,需要给它再加上一个右手边啊,有一块这样的区域,它是一个半透明状的一个颜色,里面有两段文字,所以我们把它加上,继续找到这个view组件,它下面有一个view啊,我们给这个view呢,它设置一个定位。
12:14
来往下走,它是个决定位啊,决定位的这个位置的话呢,它应该是右边是零啊top设定这样的一个位置,然后指定的宽高,宽度的话呢,比方说我们会设置为80PS,高度的话,就被内容撑开百分百,就这样的一个高度,大家能看到就在这里。我们能看到一个这样的高度好了,那么这样的一个高度之后呢,我们还需要做什么呢?来一起看啊,还需要的话就是给它一个背景色。背景色的话呢,是个白色,但是是半透明的,所以是50%这样的一个颜色,诶就出来了一个这样的背景,那么这样的背景呢,我们需要给上面塞两个,塞两段文字啊,我们把它给塞两段文字,第一段文字呢是。是以它的一个价格。
13:01
啊,我随便给一个纸,然后呢,还要塞第二段文字。第二段文字呢,是它的一个数量。好呃,那么这个文字呢,要垂直水平居中啊,所以说我们通过找到这个容器啊,让它垂直水平居中。首先他们的这个center和这个center啊,他们就会垂直水平中的啊,水平的话呢,应该是靠右对齐啊,不是居中,所以说我们水平的话要靠右对齐,要靠右边,诶它就顶在右边了,同时上面这个文字呢,它是呃需要做些调整的。我们调的大小,那调成都调成16PS。16撇,其实它这个是要加粗的。OK,下面这个的话呢,我们要调成。呃,14PS稍微小一点就好了,然后呢,它颜色应该是个灰色。好了,那么这样呢,我们就把它设定好了,设定好了之后呢,我们一起来看下效果,看看最现在的效果是什么样子,来我们找到代码,然后增加分析一下。
14:08
OK。找到订单,同样的为了每次都跳转到订单的话呢,我们可以把这个index改成三啊,这样呢,每次刷新的时候,它都会在这个订单页面啊。我们一起来滚动一下,这个半投屏效果是有的是有的,但是。我们很明显能看到,就是最后一件商品被挡住了。他被挡住了,而且这个半透明应该不是50%,还要再深一点,因为这样导致那个共五界这个看不清楚。对吧,然后就是咱们的这个,呃,最后一个商品被挡住了,那么我们一起来调整。首先啊,可能第一个同学想到的是get from view呢,加一个painting right,让他painting right为这样的80PS或者90PS都行。啊,我们可以加一下。找到啊,给大家一个pening right为90PS。
15:01
OK,同时呢,这个背景色啊,我们找到这块区域啊,就是你这块区域它的背景呢,50%还不太行,百分之。70吧,看效果哈,OK,我们来看一下真机,真机的一个效果。OK,那么蒸汽的效果问题就是咱们的最后一个商品的确显示了,这个最后一个的确显示了,但是它这个半透明效果就消失了,对吧,好像我们的这个百分之这个什么70高的位,但其实不是的。是因为只要你设置个paint顶的话呢,它这个半透明,它就透到下面的这个白色的背景,所以就导致它就是个白色的像。懂吧,所以这样效果呢,是不太好看的啊,那么怎么解决呢?来,我们来一起解决一下。他这个解决方式得是这样的,不能加这个Penny。Paint的话呢,得去掉,我们得怎么样呢?给它这个元素啊,就是这个square元素,给后面再加一个容器,再加个。
16:08
这个view的宽度就是为刚好就是这个,呃,90PS高度的话,呃,无所谓啊,高度一都行,他就负责占个位置,知道吗?最后一个元素就负责占个位置,这样的话呢,我们再更新代码。这个元素就负责占一个位置。你看这样的这个半透明就有了,而且最后一个。呃,最后一个商品应该要出现啊,他怎么没出现。我们再看一下它的半透屏效果就有了,但是我们这个商品没出现啊,我看看是什么原因。宽度这个90怎么没设置上去啊。OK,这样就设置上去了,现在应该OK了,再试一下。来我们滚动,你看最后呢,我们就能够看得非常清楚是不是。
17:03
是的吧,最后呢,就可以滚出来,是不是滚出来啊好了,90可能有点多了,后面我们可以把它的这个宽度调的不要这么宽,比方说这个呢,它调成呃70对吧,我们这里只要调80就好了,这个我们后面可以自行调整。好了,所以这就是这块区域的一个设计。它呢,不能用painting right啊,得加一个容器在那里占位置就好了。我们把它都调小一点,这个比调成。呃,80。或者说70,然后呢。回车啊,然后里面这个这个容器就调成60。就调小一点,咱们就不要太大了,看起来怪怪的好了,然后下面呢,我们还有一个再来一张的按钮,我们来整一个按钮。OK,它是在这个里面。不是在这个里面啊,在整个这个view里面,在下面加个按钮。
18:02
OK,按钮在这啊,他就再来一道。对吧,好呃,位置上呢,它的宽度不要这么宽,同时它的这个pen顶这些都稍微的大一些,我们把宽度调小于100看一下效果,100的话都稍微有些大,比方说为60。OK,然后呢,它有pending效果,我们pending都设置为零。对吧,这样的话呢,它就是一个这样一个小小的一个效果,然后呢,它要靠右对齐啊,靠右对齐的话呢,呃,我们要给它包一个容器啊,这样的话呢,它就能够靠右堆起了,所以说这个按钮的话,最好是加在一个容器内部。OK,把按钮移到容器内部去。OK,给这个容器呢,让它。靠右对齐就好了。
19:00
OK,它就会靠右边,所以说这个按钮就好了,最后呢,你就是可以把这个它字体大小呢调成。占14吧,然后呢加点粗对吧,加点醋啊,然后这个边距呢,其实还是偏呢,还是不要都是零。盆顶的话呢,上下为。二吧,左右为五吧。这样的一个距离啊,那么宽度就70就不够用了啊,那么宽度就不给了,让它自动撑开吧,被被内容自动撑开,然后有些圆角有个这个边框。圆角的话呢,大概来一个5PS啊,边框的话呢,EPS没问题啊,那么它的颜色是CC吧。倒闭换一次百分百。好了,那么这样的一个按钮就完成了。这样的案子就完成了啊,我们呢,甚至可以看看效果。
20:07
OK,那么这里就有一个再来一单的按钮,但是它这个pendy呢,稍微的呃,稍微的丑一些,稍微丑一些,所以说我们后面呢,要做的话就是把它的这个painting呢再调好一些啊就可以了。OK啊,那么我们接下来最后再调一下它的这个偏调好。上下二左右,不知道是不是没有刷新到位的原因啊,其实它这个调的应该是没有任何问题的,Pen已经调了,Margin的话呢,都是零就好了。或者剩下左右都是这个也可以自行调整,我们就不调了,那么这块区域就调好了。我们接下来呢,要做的就是把这块区域呢复制几份对吧,那么这样的话呢,它就明显有多块区域,将来就可以滚动,然后上下之间的间隙呢,稍微有些大,所以说我们在指定这个元素的区域的时候啊呃,上边距就不给了,对吧,我们就给专门给下边距,上边距的话呢,包括所有内容都由这个外面容器来给,这样的话呢,会更好一点。
21:12
所以说我们找到这个SCLL,找到这个整体是sc view啊整体sc view呢,我们加个pening为10PS。OK,那么pro加了pen定为十撇S的话呢,那么里面我们就不需要写这个拉十了。马嘴的话呢,上下都不需要,上下右都不需要,只需要一个下面有一个马嘴就好了。嗯。好呃,我先简单调一下,看一下他这个调的到底对不对啊。
22:01
哎,怎么每次挑都没挑好一啊?先调整成零,然后再去改它,把它改成一个10PS。好,那下面这个也是先调整个力,然后再把它改成10PS。下面这个也是线条个例。再把它改成10P。好。呃,但是下面这些还是没有生效啊,没关系啊,我们可以把它给删掉啊,用上面这个复制就好了。OK,用第一个啊,把第一个呢复制积分。OK,那么我们整个这个。区域就出来了,然后呢,上面这个区域离稍微有些奇怪啊,所以说我们在给这个边距的时候呢,它下边距不要给。找到这个序啊,下边句不要给。
23:01
好了,那么我们整个区域就应该完成了,下面呢,我们就一起运行看看效果。打开代码重新同步一下。对吧,哎,你看这多个区域就会在这个区域中滚动,没任何问题,然后呢,每个区域之间可以单独的滚动。好了,那么我们这里就基本诶这个效果,它可能投屏有点卡,但实际上是没有问题的,就是在应用上是没有问题的,应该是投屏这里卡了。好了,呃,最后呢,我们把这个背景色干掉,我们就完成了这个功能。好了。OK,它这个还是没有设置上啊,有时候会有一些这样的一些莫名其妙的问题啊,就是我们把地上的值它没有生效。
24:05
好了,那么这样呢,我们就完成了这个订单列表组件。
我来说两句