00:00
接下来呢,我们继续来完成首页,首页的哪个呢,就叫做分类列表,我们一起来看啊,整个分类列表呢,就是个容器,它分为上下两层结构,对吧,每层结构呢,都是由一个图片加一段文字组成的一个区域,所以整个页面结构呢是比较简单的,我们下面来看,我把这个代码的复制一份啊,来到这个home carry这里面。OK,复制的目的不是为了啥,主要是我有些基本结构不想再重复写了,所以说我就把这个样式呢,把它给删掉。改成home。然后上面的结构呢,我们全部去掉,叫carry。好了,那么接下来呢,我们来去写这个页面结构啊,整个结构呢,其实是非常简单的。整体是一个view对吧,然后分为上下两层结构,其实你分不分上下都没关系,我们可以通过样式来指定啊,那么每个view的话呢,它是分为一个image。
01:03
类似holder啊,点点斜杠,点点斜杠,我们来看一下用什么图片image下面的carry。好的,然后下面是一段文字,叫美食。OK,把这个结构我们复制N份。上面是12345份,再复制一次就十份了。从上面到下面一点点改啊,第二个是2345。六。七。八。就。十。OK啊,在这个我还不想看效果的时候,我先把它擦掉,不然它一直刷新的话,看起来其实挺挺不好的,然后呢,我们来看电影。
02:08
小店。娱乐。外卖。KTV。周边有。人。母婴全部。好了,到这里我们就把整个页面结构给写好了,下面我们可以看一下这个效果,我们把组件引进来。引入在home组件引入这个home carry,然后呢在上面进行使用。好的,我们一起来看啊,那么整个结果就出来了,当然因为我们要调样式,所以整个样式很难看,我们同样的要水平排列,所以我们一定要改样式。
03:00
整体要水平排列非常简单,就是Fla为肉,它就会以水平排列了。那么水平排列的话呢,它就会全部挤在一块啊,对吧,那么接下来我们就要去调整它的每一个样式。OK,整个内容呢,我们就叫carry item容器啊。我们给它加上这个类名。好,往下走。我们呢,就是给它宽度为整个距离的一个20%,那么。应该就会达到我们想要的这个目的。他说这个编译失败啊,那么说明我们是不是哪里复制,诶怎么多了一个井号。多了一个。符号啊,导致项目编译失败了。
04:02
好了,刚刚复制的时候复制的有点小问题啊,OK啊,其实这样的它百宽度20%,它其实可以达到我们小的效果,但是它有时候就是我最开始也遇到这个问题啊,就有时候他半天没有反应啊,挺奇怪的,没关系啊,我们先继续改着啊,后面它自然就会好,我们把它背景色调为白色。然后呢,给它来一个喷顶效果嘛,喷顶十上下左右都是10PS。其实在写这个PENNY10的时候,就写个P10,按table写,它自然就会有这样一个PENNY10的一个效果,我们接着再写啊,接着再写,呃,把这个图片大小呢,把它顶顶顶大来啊顶大来。OK,下面这里呢,都需要写这个类名啊,其实这里我们最开始就应该写好,会简单一点啊,那没写好的话呢,我们就全部复制。
05:09
我们需要给图片给它整一个大小,还有下面的这个文字。正上这个类名。好了,我们接下来去调整这个carry。呃,它和这个文字呢,他们之间其实要呃水平居中的啊,水平居中,那么水平居中的话呢,在这里是center啊。原因的原因就是因为他们现在是垂直方向排列,所以是二宽度的话呢,我们就是。为50吧,我们先调一个50,先看看效果啊,然后呢,这个carry test的话呢,那肯定是要小一点的。
06:02
从size呢,我们先定一个12PS我们先看效果。好了,那么我们就能看到它整个区域啊呃,它flash呢,它升升一行,但是他现在没有换行啊,我们把它换行也说一下叫。Flash va va。那它可以换啊,这样呢,就不会仅仅成一行整完之后呢,这个图片呢,稍微的小一点啊,我们把它调为60PS。OK,大小是可以的,然后上上下呢,稍微有些边距啊,所以上下有边距的话呢,我判定这个上下边距就不要给了啊,我们在这里直接给这个上下边距就好了。来一个吧,上下为十,左右为零。
07:00
那么上下左右多为十,我们看效果。OK,不太行,那pen上下左右都会十。OK啊,差不多就出来了,基本上能达到我们想看到的这个效果,那么无非就是这个文字距,上面这个图片呢,稍微有一点点间距啊,我们再把这个间距调起来,哎,你看咱们的这个样式就一模一样了。好了,这样呢,我们就完成了这个分类的一个样式与结构,就这样的,整体呢,就是采用一个flax布局,把它宽度呢调成20%,这样一行就五个,而且要记得它可以换行的flax rapper为weper,它就可以换行了。好到这里呢,我们就要完成好了这个布局。
我来说两句