00:00
前面呢,我们已经开发好了购物车列表,那么接下来呢,我们就要点击购物车那么去结算,包括在店家那里可以点击去结算啊,所以我们先开发出来这个订单的静态组件,然后我们后续再完成点击跳转功能。来到原形图,我们找到这个O的DJPG,就是我们订单的这个静态组件啊。圆形图,我们把它截图一下。然后呢,贴图后续我们就按照这个图片来进行开发。打开我们代码,在配置下面新建一个文件,叫order订单。然后在订单下面呢,新建一个STML文件啊,代表我们的这个组件。然后呢,组件内部呢,我们把它取名字就叫order,外面的容器呢,我们还是叫save area safe area,然后它自带的样式我们先删掉,有一个最纯净的一个组件。
01:00
然后我们点击左边左上角啊这个按钮,进入这个可视编辑区域,选中shift,我们给它调一个宽度高度啊。以及一个背景色。方便显示我们的一个整个区域。好了,那么接下来呢,我们就去拆分结构,结构呢,很简单,上。中啊,这里有一块区域,下面是一块区域,以及最下面一块区域啊,整体结构就是这样的一个结构,没有说特别的复杂啊。这个是说实话就一目了然。呃,那么我们呢,到时候就可以去对他进行一些操作了啊,一些操作那么我们一点先先搭建啊,先搭建头部吧,然后系统组件拖一个入进去啊,头部左边是一个图标,右边是一个中间是一个文字啊,我们先用文字,因为左边图标呢,我们用定位就好了,文字呢我们是让它居中的。
02:00
来一段文字,文字的内容叫提交订单。然后呢,它大小呢,我们就设置16PS对吧,然后含高的话呢,就设置成呃,自重的话,我们也不需要加粗了,就。就这样吧,让他就这样啊,我们让它水平居中啊,文字水平居中,OK,它就居中了,然后上下呢,是间距的,上下间距,我们给这个view加上下间距,给view加给view的话呢,上下加一个10PS的大小的一个间距。好了,然后呢,我们再给这个view呢,添加一个图片。诶,下了个图片,整个图片定位定定位到左边就OK了啊。我们给图片调一下它大小,大小呢大概是。呃,12或者14PS左右啊。好,呃,给他这个图片,图片呢来自于。
03:04
呃,Image下面的shop下面的back偏距。OK,就是这个图片啊,一个箭头,一个左箭头。OK,没问题啊,然后呢,我们把它移到这个上面去,移到上面去。我们来看一下这个图片啊,图片好像。看起来怪怪的。不是说应该是order,是order。Border下面的back偏距,对,它是黑色的,它不是一个,呃,白色的。好了啊,那么我们把图片呢,再定位上去1024PS可能还有点小,我们还是调成16PS来选中它调成16吧。好,然后呢,我们通过定位把它定位到左边去啊,左边距的话呢,我们来个20PS上边距的话呢,50%是不是,当然50%很明显它是不会居中的。
04:03
它没有居中啊,那么你想要居中的话呢,它的这个高度。就得在负的一个,它本自身宽度的一半啊,就是负八。我们来看一下啊,负8PS,呃,二八一十六嘛,对吧,负8PS好像它没有效果,我们点击再看一下负8PS,它这个没有生成啊,OK,那么这样呢,它就生成了,就在这个位置啊,没有任何问题。20PS的话呢,可能稍微有些大,我们调成10PS就够了。好了,那么我们这个头部这块区域就成功了,下面呢,我们来给它一个view结构。这个view呢,我们来看啊,其实他们整体的一些样式是非常相似的,所以我们后续可以给这个view的一个公共类名,后续方便去操作啊。它的样式呢,其实就是margin和pending都是10PS,很很明显啊,然后背景色是个白色。
05:05
同时有一个10PS的圆角。OK,那么这样的一个区域就出来了啊,后续呢,我们都会按照这种方式去指定这个区域。那么这样的话呢,它上面其实间距就还是挺大的,挺大的,如果说你跟上面间距不要这么大的话呢,那么我们最上面这个view啊,这个magic它的上是没问题,但是下就不需要了。这样他们接距就会稍微小一点点。OK,拿到这个里面呢,它又分为上中,就是分为一。2344个区,所以说我们接下来继续top view啊,那么这个view里面呢,需要放一个文字。然后呢,需要放一个图标,它们呢是一个水平排列,并且要space between啊。好了,先调好,调好了之后呢,我们给左边一个文字。
06:03
叫对吧,这个随便写个收货地址,咱们深圳。二回谷。对吧,作。啊,多少楼啊等等。可以随便写,那么它的大小的话呢,应该要大一点点字体。我们调成20。然后呢,加粗。OK,那么这个就写好了,右边呢,还有个图标,不着急,我们再给右边整一个图标,把图片拖过来啊。OK,它大小呢,就16。16吧。然后呢,他们整个体是要垂直居中的,当然这个不着急啊,我们设置它的这个图片先。弟弟行啊,弟弟行啊。Image下面的order。
07:00
Order下面的我们看一看是哪个图片啊。是。不是这个啊。这个图片呢,应该之前我们已经用过这个图片啊,应该是个箭头,不是这个镜头啊,不是home的箭头,我们看一下是不是shop里面有个箭头,是这个back吗?不是。好,我们来看一下,是这个萨,不是这个解也不是。好吧,我们再看看啊,哪里有这个箭头。Forward,诶就是这个forward镜头啊,就用它的,那么这个shopcas的这个forward。好诶,咱们接头就出现了啊,出现之后呢,我们让这个容器,整个这个容器呢,要垂要这个allow center让它们居中,这样的话呢,他们就对齐了。对吧。好,往下再去套一个文字啊,也不需要套容器了,直接套个文字,不是套这里面,而是套这个view里面。
08:06
OK,也不是这个view里面啊啊,是外面这个里面好文字的话呢,它跟上下是有边距的啊,这个我们后续可以一点调整,不着急啊,比方说我们找到上面这容器给它加个拉。呃,Button啊10PS这样就进去就出来了。这个文字呢,其实我这里就直接写了。其实这里呢,应该是有这是一段文字,然后空格这是一段文字啊,当然我这里就简单写一下了。好,呃,那么它们的大小的话呢,应该就是。比16稍小14PS,然后颜色是一个灰色。好了,那么我们就把这个文字设置好了,接下来呢,下面还有一段文字,我们继续设置。
09:07
好,它呢也是有上面这个文字的一个marin button是我们都是加marin button吧。好,这里就叫。写在疫情嘛,对吧,为减少。接触。降低风险。推荐使用无接触配送。好,那么整个字体字体呢,其实跟上面的大小是。是小一点点的,所以说它大小是作为12。然后呢,它颜色呢,设置为00CC99咱们的主题色。好了,那么这样就把这一块内容也给设计好了,最后下面的这块区域啊,它是分为一左右两块布局的,我们找到这个距离,下面的这个边距的话呢,要稍微大一点点,我们比如说设置为15PS,好,然后下面呢,我们套一个view。
10:08
好,View的话呢,它是水平排列,然后呢,水平排列space between,垂直方向是居中,OK,设置好这个内容,然后一左右两段文字。左边文字立即送出。OK,它的大小的话呢,和上面这个是非常相近的,但是稍微小一点,18万,同时它的这个加粗。好,右边又有一段文字。右边的文字呢?角大约多少多少?11点啊,11送达,大约什么时候送达好了啊,那么这个颜色的话呢,需要调一下。
11:03
好,那么这样的话呢,我们就把咱们的这个上面这块区域就搭建好了,整体就是这样的一个情况。那么如果你觉得这个间距10PS有点大,你可以把它调成5PS,然后下面这里调成10PS也可以,这可以自己的自由的调整。那么我们呢,就接下来继续做了,继续做了,再下面我们又开发一个view。好,这个view的样式呢,其实和之前的view的样式是一样的,我们找到之前的view的样式。呃,应该是这个谬一吧,那就不是,那可能是谬二,OK,是这个谬二,谬一就去掉好了,那么这样的话呢,我们就直接会用上这个压式,就不用再额外的写了,那么这个样式的话呢,应该他们拉啊,三个方向都有啊,应该波的话。呃,Top应该不要有marin,最好top不要有margin,然后呢,Button啊,这个button的话呢,就是要有margin啊,这样的话呢,我们更好设置,或者说他们三个边距应该是这边有,这里有,这里有上面没有,这样也行啊,所以说我们在设置这个边距的时候,V2这个样式啊,还是得做一些调整。
12:21
来还是做一个调整啊,它这个margin的话呢,底部最好是不要有。OK,我们把底部的这个样式给去掉了。还没去掉啊。OK,底部去掉的话呢,那么诶,咱们的这个对齐方式才不会出问题啊。好,然后下面这块内容呢,它的简单就是一个支付方式,右边是个缪啊普通支付,然后一个这样的箭头啊,那么这个支付方式呢,和立即送出其实是一模一样的啊。我们甚至可以把它复制一份。
13:00
啊,移到这里了。对吧,一模一样的,我们只要改一下支付方式。好,右手边的话应该是个谬结构,右手边是个谬结构。好,此时我们还要给整个谬呢,它应该是一个啊,水平排列space between,然后呢,同时center这样的一个结构啊,好,这个的话呢,它又增加一个文字,但是这个文字是不要加粗的。大小的话呢,也是16 PS,但是不要加粗。OK,叫普通支付。好了,同时它这个view里面我们点进去啊,它的view里面应该还有一个图片在右边,同时整个view呢,应该是水平排列,垂直居中。
14:00
水平排列,垂直鞠躬好,那么这个图片大小的话呢,就16PS就好了。对吧,是然后待会还有点左边距啊,待会来调吧,好它这个图片地址呢,就和上面是一样的。OK,然后呢,加个左边距。好了啊,那么我们这一个就设置完毕啊,这个应该是18PS 16PS还不够啊,18P更好。好了,那么这个我们就设计成功,接下来我们继续往下走。再来一个U好了,这样同样的给他一个样式类,于是U2OK,这个样式就出来了。嗯,这个V2样式竟然没有没有把这个margin button去掉,所以说我们去外面调一下。
15:06
我们去外面调一下,这个其实涉及到最开始我们就应该调好它,这个margin不应该都是十。应该是上时右时下零。做实啊是这样的个样式。OK,这样呢,我们在进来的时候,他就会按照我们样子去布局了。好了,那么这里面呢,线是很简单啊,上面一个标题,然后一根线。啊。标题了。肯德基。宅急送啊,什么什么什么地。老昌。红。好,我们给他了一个相应的样式,然后它大小的话呢,比较小一些,没这么大,16PS就好了。
16:02
然后呢,他要加粗一点对吧。呃,应该没有加速啊,它就是个普通的颜色,然后给他一个border bottom。给他一个边框,搜的颜色是灰色。但我们最好是给个一一这些颜色,然后只要给下面一个EPS上,其他地方都是零。好了,呃,我们来看一下这个边框啊,它到底有没有呈现。呃,好像看不出来啊,点击再点击。我们给大家个paintding painting bottom。来个10PS。如果下面给的十,那么上面也得给十。好,很明显咱们的这个。边框宽度没有呈现啊,下边框是EPS。
17:01
那么颜色是一个这个色,我们调成灰色。OK啊,那么这个线其实有啊,其实有就是之前我们设置人一一可能不太明显啊,我们是CC吧。好了。那么这样呢,我们就把这个上面的这个文字啊,加上下面的这个线都设置好了,如果说有必要还是给他一个加粗的一个颜色啊,不然的话呢,看起来看不出来他的一个效果,我们加个粗吧。好,下面呢,就是一个食品列表,那么后续要便利的,我们设置一个就好了,它换成后续要便利,然后最下面呢,就是一个用户配送费什么的,来接下来一起做。OK,添加了一个view区域啊。整个B区域呢,距上面还是有些边距的,所以说我们后续去调整它的一个marin。
18:02
Marin top来个十撇S吧,至少来个十啊,后面我们再来看具体样式该怎么调好了,整块区域呢,它分为左,这是左,这是右啊,这是左这是右,那么左边的话呢,有两部分组成对吧,右边就是一部分,其中左边的两部分的第二部分呢,又分为上中下三块区域啊,所以整体就是这样的。好,我们给它在view里面再套一个view啊,这个view呢,它是它应该是水平排列的。然后呢,在这个壁中,我们塞入第一张左侧的图片。OK,大小的话呢,我们就设置成五十五十。即可。好,然后呢,这个具体图片它,诶不是这个view啊,是那个图片。
19:00
是里面的图片,我们来看一下啊。点击是这个图片,我是不是。好了,图片地址。Image。下面的硕啊。下面的故事,我们随便挑一张图片就好了。第写上image下面的shop shop下面呢,随便整一张图片,故事一啊,那么jpeg。好,呃,这个图片没出来啊,那么我们再看一下是不是地址写错了goose JPG啊,不是JPG。OK,那么图片就呈现了,诶就在这啊,然后呢,图片呢,其实有些小圆角啊,我们这个圆角就不给50了,给个五就好了啊,稍微有些圆角就好了,然后呢,接下来我们继续往容器里面再塞一个容器。
20:12
好,这个容器呢,他们是垂直排列,所以说不用关心,然后往里面塞文字。OK,第一段文字叫什么元气?顶呱呱系列对吧,就这个啊,元气顶呱呱系列。我们来看一下这里,它现在显示有些小问题啊,它这个是垂直排列的,我们要观察一下是不是之前这个容器的宽度啊,对它这个50P它还是生效的啊,对它应该不生效好了啊,那么元气顶呱系列呢,它的大小好像跟上面这个标题是一模一样大小。那么我们设置它为16。然后呢,加速。
21:01
OK,其他的就没了啊,就这个,然后呢,这个图片有些右边距,不然的话呢,他们靠的太近了,不好看。来一个。10PS,好,呃,接下来呢,这个容器下面我们继续给东西啊,继续加文字。好,这个轮子就明显小很多了。12、颜色是灰色。好了,再把它复制一份啊,还有下面最下面一个叫什么乘三。好,那么这就是我们绘制的这个内容,好,整个这个图片呢,应该还可以再大一点,60 60。会这样大小呢,就刚好是和这边是对齐的,所以说就更加好看一些啊。
22:00
好,那么接下来呢,我们还需要在这个view这个同级呢,右边再给一个文字。这个文字呢,就是它的一个具体的价格。好,那么整体呢?我们要设置成水平排列space between。对吧,这那个问内容文字的话呢,它不需要居中了,所以说我们就没有设置它居中了,把它大小调成16PS。加速即可。好了,那么这个内容就生成了,将来我们只要复制多份啊,就可以生成多项这样的数据,OK,最后呢,在下面还有一个容器。OK,这个容器我们要自己手动的拖进去。
23:01
OK,投进去之后呢,他们也是水平排列,然后呢。水平开店。Space between垂直方向是center啊,这里一个区域一左右两个文字啊。左边文字用户配送费。好,呃,然后大小。大概是。16PS。然后呢,这个每一个内容应该跟下面是有边距的,不止上边距,下边句要有,或者说它只有上边距也行,那我最后的这个容器给一个上边距。这个容器啊,给一个。上面句是。他们不要靠太近了,好,右边呢,我们去再生一个文字啊。
24:04
右别这个文字其实和左边是一样的,只是它的价格是它是一个价格。好了,那么到这里呢,我们就把前面部分全都开放好了,最后呢,只剩下最后一个容器来。那么这个容器就要去定位了。这个容器的样式其实跟之前那个很像,我们之前开发那个页面的时候,也是开发的一个类似的,但是它样式是很像,但不是完全一样的。我们来设置一下它的高度呢,我们记得应该大概是60PS左右啊,当然我们不够的话,或者说太高的话,后面可以再调,然后呢,它的背景色呢,我们给一个黑色。给个黑色圆角的话呢,我们给因为是60啊,所以说它都是30PS的一个圆角。对吧,它就可以达到这个效果,然后呢,他要定位定起来。
25:06
定位定起来,Button是零啊,Left right都是十。波特呢,应该是10PS,在这里看到10PS啊,后面我们可能还要改啊,好了,那么这样的就形成的这样一个区域,区域的话呢,它应该要他要做的很简单就是。水平布局,然后呢。A space between,然后呢,垂直方向是这样的一个区域。然后呢,我们接下来塞一个文字作为它第一段内容啊,文字呢就是它的价格。好了,文字的话呢,我们整体是要大一点的。至少16,然后呢加粗,同时颜色是个白色。对吧,就是这个文字啊,16可能都不够20啊好,然后的话跟左边是有些左边距的,不然的话呢,太顶着了,不太好看啊。
26:04
左边去来个20。OK 20吧,那么右边我们也塞一个这样的一个view,一个test。OK,右边T呢叫提交订单。那么它的话呢,也是大小呢,也是这样的20PS吧。然后呢,加粗。只是它的背景色是个绿色。高度呢,百分百。宽度的话呢,我们可以给,比如说一百一百肯定大了80看效果。宽度80,不够100。100差不多啊,然后呢,让它呃去文字呢,Test nice center,同时韩高呢为它的整个高度为。
27:03
啊,应该整体的高度是60,这样呢就可居中了,然后给他一个border radiOS啊,一个圆角。右圆角都是为30。好了,那么这样呢,就形成了我们整个内容啊,这个提交订单的文字应该要再小一点点啊18。OK,我们小一点点,不然的话呢,太太大了,有点突兀。整体呢,这个60也感觉有点大50,我们看看效果。50看起来也还行啊,那么50的话呢,我们这个这个文字的高度也要变成。这个line has也是50,同时他们的圆角呢,也应该是。25。好啊,所以就是25,那么这样就可以达到我们的效果,然后它这里是整体都是25。
28:09
好了,我们把整个容器大小改小一点,改成50PS。那么这样的话呢,我们就完成了整个的一个页面,最后呢,我们就把它的一个背景色去掉。好吧,这样的话呢,我们就把这个页面。给开发好了,下面我们就可以通过设备去预览看效果。来。那么要看效果的话呢,是这样的啊,直接把我们的APP Jason。调为零就是显示首页嘛,然后呢,显示首页的时候,我们去显示这个order的这个页面,而不是其他页面。呃,显示的页面的话呢,如果可以的话,它就可以显示成功啊。
29:01
来,我们来看一下这个代码。好了,那么这里就显示成功了。这里就是我们开发的这个页面,包括所有的间距啊,上面的这个内容应该来讲都没有太大的问题,它的这个编剧呢,都是OK的,后续呢,我们要做的就是呃,把这个数据呢进行遍历展示诶即可,这样就可以完成相应的内容了。
我来说两句