14.店家静态组件-上

下面呢，我们要完成一个店家的功能，当我们点击咱们的这个首页食品列表的时候，要跳转到这个食品对应的店家去。那么在做之前呢，我们先把店家的这个静态组件先开发好，开发好呢，我们点击才好跳转过去。OK，下面呢，我们来看一下圆形图。打开这个shop店家的这个圆形图，诶，就是你。好，那我们对它进行一个截图，然后贴贴贴在屏幕上，这样的话呢，我们就知道咱们要画的内容长什么样子了。好了，下面我们就去完成这个shop店家，同样的，我们会大家使用可视化编程工具去搭建这个用户界面。来，呃，我们在这个配置下面啊，它是一个单独页面啊，我们新建一个文件就叫shop。然后在shop下面新建一个STEM文件，就叫index就好。

上键。OK，然后呢，所有的样式我们全都去掉，它呢需要一个safe area的一个容器，其他的我们都可以，拜拜。然后呢，名字取名字叫shop。OK，准备工作做好，下面我们就可以进入可视化编程工具，去对它进行代码进行编辑，编辑它好了，这时候我们就进去了，老规矩我们找到这个安全区域啊，高度先设置为百分百，然后再把背景色改成一个比较显眼的颜色，方便咱们去查看它这个区域内。好了，然后我们再来看这个设计稿啊，整块区域呢，它分为12。下面是整块区域，因为下面这个背景色呢，是一个整体啊，对吧，当然下面你不整成一块区域也行，这个都没关系，但是上面这一块肯定是一个区域啊好，然后呢，接下来就是下面这一块呢，主要是这里是一个，这是一个这里它要往上走啊，所以说咱们这里得用定位往上走才行。

然后下面呢是一个元素，然后这里是一个tab导航，下面这里是个轮播图，然后再下面整体是个容器，以及这一块是一个。定位定在这个位置的一个元素。好大题呢，就是这样的一个结构啊，下面我们就一起来搭建，首先来搭建上面这块区域。来上面这块区域，它的难点就在于，首先它这里有一个背景图，有一个图片，其次这个图片呢，是呈现一种半透明的一个就是一种有个遮罩层的效果，以及这里还有一个返回的一个图标，那么怎么让图片呈现一个遮罩层的效果呢？啊，如果是在我们写前端代码的时候啊，那么我们设置背景图是有办法让背景图呈现一个背半透明的效果，但是咱们这个平台呢，它没有提供这样的样式，所以说我们就不能用这个背景图啊，当然你用背景图也可以，但是因为我们这个图片呢，将来是要请求得到的，所以你设置成背景图的话，这个样式方面我们不太好去操作啊，所以说我们这里还是整成一个image图片，它就大小就是这个大小。

然后我们再整一个区域，把它调成一个半铜币效果，让这个层级位于图壁之上，那么就能呈现一个这样的效果了。我们下面一起来看啊，首先给它一个基础组建一个缪啊，一个容器高度的话呢，我们给它设置一下。标度，比方说为一百五啊，一百二都可以啊，我们设置一个大小，一百二一百五稍微有些大。好，高度呢，我们定S为120PSOK，那接下来我们三张图片。图片呢，很简单。高度也是120。哎，我们看看有没有选中这个图片啊，高度一是120，宽度呢至少是百分百对吧。

好了，所以这个图片的高宽，宽度和高度呢，也指定了是跟容器一样大，那么下面我们要做的就是给这个图片呢，指定它的一个呃路径啊。那么图片路径呢，肯定是shop啊，对应我们开发的店家页面肯定是shop shop呢有一个BG.jpg啊，这个就是那个背景图。好了，诶，你看咱们背景图就出来了啊，所以这个背景图这里要稍微注意一下，就是它没有这个半同屏效果，所以说你要加上半同屏效果的话呢，我们得在这个区域内啊，再添加一个容器预容器，而这个闭容器呢，它得采用定位定在那个位置，否则它就被挤下来了。定位呢，TOP0 left0，宽高都是百分百。当然你高度因为知道是100 PS所以说你可以写啊，但是120，但是我们就写百分百就好了。

包括这个图片，我们最好也是写百分百啊。原因就是因为万一将来我们这个容器我们想改小一点的话，那么这样就改最外层就好了，因为里面都是继承的。好，容器在这里，OK，那么我们给容器一个背景色啊，背景色是个零零，我们给一个50%，看看效果，诶，这样的这个制造层就呈现了一个这样的效果，对吧？所以说我们要给一个这样的一个效果的话呢，可以让一个制造层覆盖到咱们图片上即可呈现这个效果。好，这里还有一个小图标啊，我们还要往上面再拖拽一个图片。OK，哎，他进去了，好，这个图片大小呢，就比较小了，没这么大，它就20就好了。会20大小，然后呢，他应该要定位啊，当然定位之前呢，我们先把图片先找到啊。它来自于这个shop下面的这个back png。

好了，诶这个箭头就出来了，现在接下来我们要把它定位定上去。呃，定位在这绝定位对吧，Top呢，我们50%，然后呢，Right为20PS，大概在这个位置啊，大概这个位置或者是10PS也行吧，反正就是调一个位置啊，那么50%呢，它是没有它是。就是。50%呢，它是以这个左上角点去定位的啊，我们还要再把它往上移一点，移什么呢？以自身宽度的一半啊，自身宽度是20自身宽度的一半，我们可以通过这个marin来设置为负10PS。好，这样呢，他就才会来到真正的这个终点，诶咱们的这个副食好像没升上啊。好了，那么这样呢，就设置上去了，设置负的话呢，好像要带到单位，它最终才会生效，这样我们才会来到这个真正的一个中间这个位置，好的上面这一块我们就搭建好了，接下来我们往下去搭建。

下面搭建的话呢，我们其实不用太多的操作啊，因为我们到时候会把整个背景色这个粉色呢，再重新调回白色，所以说我们不需要太多的操作，我们就直接往下面加内容就好了，就像一个字啊呃，但是下面最好是给个容器，因为它有一个全局的一个偏定效果，我们给个容器可能会。更好一点，没有容器吧，呃，它的背景色是个白色。绝容器的话，因为我们好像有个喷嚏效果。肯定是十好了，那么加了之后呢，我们给容器里面去塞东西，塞文字啊。以上还是个文字，文字我们内容打一下，肯德基宅急送对吧，然后呢，什么昌隆百货店。

好呃，那么数据打上去呢，然后这个大小文字大小是要调大一点的，之后呢，比方说我们调整25寸看。然后呢，还要加粗的。同时文字呢，要溢出隐藏啊，要溢出隐藏好这个要溢出隐藏的操作呢，将来其他地方，比如说这里也要设置啊，所以说都要设置这个艺术隐藏呢，我们就可以考虑给艺术隐藏定一个公共类名。那么第中类名我们这里就可以去使用它，诶，那问题来了，怎么去定义一个公共的类名，给它来一个溢出隐藏了。来一起看啊。呃，我们可以在这里找到返回之前的这个代码，就是原来代码在这里面呢，我们可以加一个叫呃，文字溢出隐藏的一个标识。呃，就叫over。这叫一出隐藏，Over。

Flaw。我们加一个这样的一个标识吧。那么里面就是TES，然后呢，再来一个。Face。为no overflowy hidden，好了，我们就加上这样的个类名，这个类名叫S吧，就这样会可能会更好一点，加了这个类名之后呢，我们回到这个代码编辑工具这里啊，那么你在这个预定样时，这里就可以选中我们定义的这个E类名，那么它才会溢出隐藏，那么要艺出隐藏还得满足个条件啊，他得超出某块区域才会溢出隐藏。而我们整个文字显示区域，它并不是百分百的，我们设置为宽度的70%，看看啊诶这样呢，它就可以达到这个溢出隐藏的一个效果。OK，我们这个自重没有加上去啊，加上去好了，那么我们这个标题就取好了，接下来呢，下面也是一个容器啊，他们整个内容是一个水平排列的，所以说我们可以在下面再加个容器，然后呢，这个容器水平排列。

对吧，然后跟上面其实是有些间距啊，但是我们应该不需要过多调，我们接下来走调一个图片。整个图片大小呢，应该是和这个。呃，往下走啊。这个view里面的这个图片大小呢，和这个最大小是一样的，应该是12PS，所以说我们调一个12PS就好了。OK，我要选中这个图片啊。12PS。图片就到这了，好，他这个地址呢，其实就是。Shop里面的一个叫star的图片，star.png。下面的一个。哎，你看这个star就出来了，就在这啊，好，接下来呢，它与之伴随着是一段文字啊。

OK，这个文字呢，我们加到这个view里面去。好了，那么这个文字呢，是C9，并且它的颜色是一个橙色的一个样子啊啊，这里我们都不去吸这个颜色了，我这里就简单试一下orange。把橙色就好了，大家可以自己调整一下，然后呢，整块区域应该是垂直居中的啊，我们调到center，这样呢就会对齐了。啊，4.9的话呢，跟左边右边都有些间距啊，所以我们调一下这个马马左的话五马十的右的话是十。OK，这样调个间距啊，我好像有点大，我有点大调到二吧。好，然后呢，接下来继续调两段文字啊。一个叫月兽什么什么。

好，呃，这个文字样式呢，可以调一下，它也是一个marin right10PS，同时它的颜字体颜色是GR。对吧，然后呢，它的一个最大小也是12PS啊OK，咱们这个就设好了，前面这个也要设置成12PS，不然到时候怕它出了问题复制一份啊，那么这个呢，就叫配送时间。好的，那么我们就把上面这部分写好了，接下来右边呢，有一张图片啊，所以说我们再往这块区域中塞一张图片，整个图片的宽度和高度呢，我们设置一下25%吧，或者30%，我们到时候可以看看效果。呃，图片是宽高为啊，高度我们要定死啊，高度就定死，高度定死为100PS。

好吗？呃，宽度的话呢，100。一百一百的效果，我们把它放到这个，呃，右手边去。60或者说我们给一个宽度为25%高度让它自适应就好了，那么高度让它自适应呢，我们在属性这里就要调一个属性啊叫。叫node为right face，这样的话呢，它就会随着我们这个图片的宽度去做适应，我们调的宽度为25%，它自动自动会适应，当然前提是我们要指定一张正确的图片啊。它是属于shop的avatar。点PNG对吧，点JPG啊。好了，诶，那么这个图片就出来了，他要定位在这个右手臂这块区域啊，所以说我们要开启决定位。然后呢？Right为十。可以吗？这个十应该没错啊，Top呢，应该为负十。PS。OK，那么他就在这块区域中完美的展示了，对吧啊。

它要往上移，所以说是负10PS，这它的大小OK，那么我们这个图片也整好了，下面呢，这里有一段文字，我们再去指上。OK，这道文字的样式呢，其实和这些是一样的，但是它没有，它是要加别的样式的，所以说我们后面要，呃，可以用上这个预定样式啊，就是咱们这个T式应该叫T3吧，OKT3啊，然后呢，他还需要这个eipips，还是要eips，同时他还要把它的这个什么Mar要干掉。它的margin要自己调一下，不是10PS啊，它的marin呢，上上面的应该是20。不够25。大概25只那个大小，然后呢，Rise不需要不需要，Rise不需要，就二十五一个八，OK，呃，它整个文字内容呢，就是欢迎。啊，我们可以放大一点去看一下，虽然不是很清楚，但是应该还是能看到的，欢迎光临。

肯德基。宅急送啊，我们也不用刻意的全部写啊，因为未来这个数据肯定是啊发请求去展示的，所以说我们复制几份就好了。OK，复制几份之后呢，那么我们来看效果啊啊，整个文字的宽度呢，被限制了70%，这是不行的，我们要设置为百分百。OK，那么这样的话呢，才能达到我们想要的效果。没有任何问题对吧，在这里显示。好，那么这样的话呢，我们就把这个文字调整好了，下面呢有三个tap导航，他们呢，有一个这样的一个分界线，我们一起来设置一下。来，呃，再往下面加OK，加的位置错了，我们这样拖吧。OK，加到这下面去了。下面一块区域啊，下面这块区域呢，有一个border bottom。

冰花类型是Sony的，只有下面有这个EPS对吧，然后呢，颜色是我们就贵了啊百分百。好了，那么这样的话呢，我们就会有这个，呃，其他位置我们调整零啊，否则的话，它这个四个方向都有，诶这下面有对吧，然后这上面呢，是有些间距的margin top。为一个20PS啊，稍微拉开一点间距。OK，那么接下来在这块区域呢，我们就可以写这个什么点菜呀，评价商家这些数据了啊，那么它肯定是每一个都是一个啊，一个test就好了，我们把test高度指定一下，然后给它加个边框。对吧。会点菜，然后文字大小呢，应该是16PS这样一个大小，然后呢，它如果是选中的状态，它是要被加粗的。

OK，然后这个宽度的话呢，它还加个pending。啊pending top啊pending这个button为一个大概是10PS这样的一个大小，然后呢，给下面加一个。边宽。诶，下面加个边框为绿色的是两。绿色就是我们主题是00CC199。百分百。我们一起看一下，看一下这个到底设置没设置上。呃，2PS0499SONY的。OK，它就有了，但是这个内容它不应该百分百，我们要调一下这块区域啊，这块区域呢，我们让它啊肉它就不会百分百了，诶在这里就出现了。

这个可能2P还不够，你还可以再调整3P，调成4PS，调成5PS这样的一个宽度啊，可以让它显示的更更粗一些。然后呢，整块区域的话呢，我们可以跟左手BA，呃，就看你要不要加点边距了，它肯定rise是要有值的。OK，我们这个要选中这个文字去调啊。那为20 PS好了，我们可以把这个复制积分。对吧，点菜。下一个是商家。那么我先删一个，我们先设置其中一个，比如第二个是评价。OK，那么这个的话呢，它的这个颜色字体颜色，它就不需要加速了。就不需要加粗，OK就正常就好了，然后甚至颜色还要再偏淡一点，这个我们就不调了，而且它不需要这个。

这个。这个边框。OK，所以说后面这个文字就应该是长这个样子，它不应该带有边框的。好了，呃，我们就设置好了，就是这个文字的高度可能有点高啊，就是距离这个边框可能应该不是不是十，应该是五。找到这个pending。这里应该设置为五，可能会好。OK，那么剩下这些位置呢，应该也是要设置的。OK，感觉好像没生效啊，我们又得重新来一遍，把这个复制多份，复制一份就好了，好，再重新来一遍。

这样就不会生成多个类名啊，不然的话，它生成多个类名也不太好评价，OK，然后呢，它不要第一个不要加粗。不要加粗，第二个是不需要边框好的，然后再复制一份加点菜。叫上架。好了，那么我们这个tap导航这里也写出来了啊，接下来往下走，我们需要加一个轮播图，那么轮播图呢，在这里是有个组件的，叫外per。那么swap是轮播图容器，Swaper item是轮播图的这个可以轮播的这个区域啊，是那个轮播的每一项元素。OK啊，我们同样的要把它加到这个view里面。OK，现在就加进去了啊。

在这个swaper swaper本身呢，它并不能做到什么操作啊，本身它并没有啊，我们需要指定的是swa。然it里面呢，其实就是指定一下它的高度就好了，高度呢，我们设置成150PS啊。那宽度呢，百分百，诶这样swa的宽高就设置好了，然后呢，它里面就是一张图片，没有任何其他内容。啊，图片的话呢。要做的也很简单啊，就是。就就就这个值就好了，我们看一下这个图片，它到底有没有设置上去啊。OK，宽度为150，高度也为150，好了，那么或者高度直接设置百分百也行啊，这样的话呢，我们将来调整外面的值就OK了。图片的样式非常简单，去调啊图片就是去选择那个图片。也是来自于image下面的shop。Shop的第CAROS1啊，点jpeg这这个图片好了，所以这个图片就出来了，它它整体外per整体应该跟上面有些边距，跟下面一些边距啊，所以说我们把这个边距也调一下，呃，上下边距呢，上边距我们就调个十吧，下边距我们调个20，大概占那个大小。

OK，然后呢，我们就基本上就可以把这个。效果呢就调了一下，然后图片这个本身呢，还需要调一个圆角。OK，我们再调个圆角十可能不够啊，20。OK 20有点大啊，我们调十吧，十可能好看一些。好，呃，我们调一下这个圆角啊。没调整成功，OK，调好了之后呢，我们接下来就可以把这个swaper item呢复制多份啊swap复制多份。

那么后续我们就能有这个轮播图了，而且为了让他们有事区别，我们找到第二张图片，把它的这个轮播图的开呢改成二。OK，然后呢，我们找到最后一张图片，也是把它的这个位置。改成CAR2，这样呢，就呈现了不同的效果啊。好了，那么这个轮播图本身呢，还有一些可以调整的，我们找到swa这个容器，找到属性啊，在这里我们可以给它考虑加，加不加小圆点对吧？要不要自动轮播可以选个处对吧？第一张图片是第是是几，以及轮播的这个自动轮播的时间是多少对吧？然后是否是采用衔接滑动的形式，那么我们可以调个处。然后呢，是否是什么垂直排列那个当然不要啊，当然不要，所以这样的话呢，我们就把轮波图做好了，轮波图组件呢，在这个地方呢，它是不会呈现这个效果的，我们要看的话呢，必须要在真机中调试才能看到这个轮波图具的效果，对吧？然后第二个就是我们一定要清楚这个轮波图的这个结构啊，最外面一定是swaper里面包着swaper item，然后swaper item里面再包着我们要放置的这个图片，诶，即可完成这个轮播图的这个操作了。

好，下面呢，我们就可以一起来看一下效果啊。来，我们打开这个真机的这个内容，我把它固定在这。好了，然后接下来呢，我们把代码呢，进行一次更新。好，更新完之后呢，它默认当然是首页，不是我们的这个呃商店家页面，那么我们希望要店家页面的话，怎么办呢？来看啊，我们找到APP里Jason把这个frames首页改成shop。这样的话呢，它一下就会加载这个店家的页面，我们就能看到这个效果了。好了，诶这样呢，它就加载成加载出来了。

龙波图有没有呢？的确有啊，但是这个龙波图的高度。稍微有些问题，所以说我们还要再去看看它的高度是怎么回事。找到这个轮播图啊，Swaer我们没有设置高度是吗？我们一到五。OK swap itto，我们看一下是不是都设置了高度。OK ser也要设置高度啊，我们自量一下。诶，它的这个高度就呈现了。是不是就能达到这样的一个效果。对吧，萝卜头就出现了，我们再对比一下上面啊，上面的一些样式，好像有些小问题。呃，首先就是这个啊，这个边框它怎么出现的左边框，我们一起去看一下。呃。应该就是这个test啊，就这个test，它既然出现左边框，我们来看一下，应该是000，下面是三撇S这样的个大小，然后呢是solid的啊。

OK，这样的话呢，才应该是对的，我们再次增量编译一下。好吧，可能是这里。这个更新有些有些问题啊，其实在这里显示是没任何问题的。对吧，选中它。0003PS没问题。然后上面这几个样式有点怪怪的，七我不需要。六我也不需要。对吧，我只要一个五的样式就好了。我们选中它。他也不需要五，他只需要他自己的七。他只需要九。

呃，我们来重新设置一下，这个是没问题啊，这个也应该是。我们重新设置一下这个样式吧。找他。它的这个字体大小16PS，然后呢，PA。Painting，这里还是要加加个。呃，加个5PS就可以了。当然不是上下方向都是五啊，而是一个方向是五，OK，然后把它复制一份啊，啊，当然不能复制，还有一个right。那之right为屎。好，复制一份，OK。那么为十的话也不够啊，我们还要调整20。好，下一个呢，我们就叫。给商家。好了，这样的话呢，应该就可以了，它这几个样式应该就不会重复了，对就是TEST5 test5的话，我们再看一下，我们明明调成了零啊，但是它这里显示就。

就怪怪的，明明调的是下面这个值，但是它显示的时候就就有左边，所以说我们看下这个原代码，找到这个TEST5，这是个类名。我们设置的是border bottom。对吧，我们设置波波就好了。那整体它是这个样式，其实我们设置就是波波。EPSSO，然后呢，只为这个颜色。它这个设置上有些小问题啊，我们把它全都改一下，这样的话呢，我们显示这里就是正确的了，对吧，显示这里就正确的，没有任何问题，然后他们这些间隙呢，其实还可以再调的，呃，更大一些些啊，这都没关系。TEST6的话呢，其实这里就啥也不需要啊。

啥也不需要。然后呢，这个TEST8的话呢，Right，我们调成30撇。这样呢，他们的间隙就会更大一些些。除了这个呀，30PS以外，我们这个T6。T5也要30。好了，这样呢，他们就呈现一个这样的效果，那就没有任何问题。没任何问题。下面这个border color呢也设置了，也没有任何问题。好了啊，这个3PS 3PS这里宽这个边框应该是3PS啊，诶粗一些啊，应该2PS就够了。好了，那么这样的话呢，我们就把这个线设置好了，这个线的颜色其实不是太对啊，但是我们先这样设未来改一下颜色就好了，因为主体效果出来就完事了。好了，那么我们就把这一块是吧，功能基本上呈现了我们想的效果。

最后呢，我们先不画中间区域啊，我们最后来画中间区域，我们先把底部这块区域给画了一下啊，底部这块区域呢，我们可以看到是整体是一个容器对吧？容器呢，分为左边一部分，右边一部分是不是左边部分呢，又分为图片加。一个容器上下两个文字，右边部分呢，就是一个结算的一个这样的一个文字啊，所以说我们先把这个画一下，中间因为最复杂，我们最后来画。好，我们继续来去画它这个效果呢，我们暂时可以不用预览了。好。我们要继续往下加东西啊，这时候要加的容器呢，不在这个缪中了，它是属于整合容器中的一部分。OK，加在这啊，那么它的高度是一个固定的。比如说我们设置为100PS宽度的话呢，百分百，然后呢，背景四的话呢，我们可以考虑先给个黑色。

好高度呢，100%PS应该就设置上去了，我们回车。整合区，然后定位决定位啊，它的波特呢，应该是跟下面稍微距先距是个10PS。是一个10PS啊，然后呢。嗯，这个。Margin和pen都要有。好，大致上就是这样的，但是如果你设置马的话呢，你可以看到这个宽度它就溢出了啊，它就溢出了一些些，所以说我们在操设置这个宽度的时候，宽度不值力啊，那么怎么办呢？我们设置它，呃，这个marin也不值零。马也不置顶。我们让它left时。Right是。那么它的宽度自然就可以呃撑开。我们再看一下这个区域啊，我们宽度let时，Right时。

对吧，定位没错啊，宽度呢我们不指定。OK，那么它自然就会呈现一个这样的宽度，然后它是有圆角的，有圆角。圆角的话呢，它整体高度是呃，是100PS的话，我们设置为50，整体高度应该为50PS更好啊，100太大了，那么50PS的话呢，它圆角要呈现这样的一个圆形，那么就是他们的圆角就是25PS。好，那么就呈现好了，呈现好了之后呢，接下来我们来。分为两块区域啊，左边和右边，当然其实你也可以说左边。这个这是一块，这是一块，然后这一块呢，我们可以采用定位的方式去去完成，对吧，把它定位到这个右手边去，那么也行啊好吧，我们一起来调整。呃，首先先整一个图片吧。

OK，整个图片呢，它的宽高我们设置成。暂时设置成80，先看效果。OK，再设成80，然后他要定位啊，定位上去定位呢，肯定是负的。10PS至少，然后left的话呢，应该也是10PS，大概这样的一个位置，先放在这后面来调整，因为这个80可能有点高啊，我们可能调的话呢，应该高度是60吧。就刚好出来一个头就好了，好了，然后我们呢，去找这个图片。来，呃，这个图片呢，我们来看一下图片，应该就是这个叫。就这个SWT啊的一个图片。

我们呢，用这个选重的。好了，那么这个图片就整上去了。80PS的话呢，稍微有些抽象啊，稍微抽象我们调成60。60的话又太窄了，70。70差不多啊，然后呢，跟左边边距呢不止十，应该有20。对吧，20帧的大小好了，然后呢，它就呈现这样的效果，其实在高度上呢，我们还可以再高一点六十五。65，那么65的话呢，它这个头呢，就要往上再负个15 PS哎，这样的这个头呢，就基本上是出去了一个效果。然后呢，右手边我们继续来给一个容器啊，这个容器是要给的，因为这里面的文字它是要垂直排列的。来给个容器啊，整个容器呢，我们不要让它这么宽啊，它到时候被内容撑开就好了。

呃，我们待会来一点设置，然后容器里面呢，给一个文字。容器里面要给个容器啊，因为这个前的符号是小的，所以说容器里面这里也给一个容器。好啊，这个容器呢，它必须要是水平排列的。然后在这里面塞两段文字。好，这时候因为这个层次结构比较复杂，我们要对一下看是不是对的，诶没错啊，那么这个文字呢，是一个代表前的符号。那么它的最大小应该要小一些啊，我们调成12。OK，它的颜色是白色。白色好，呃，整个容器呢，它应该要跟左边有些间距啊，所以说我们整个容器加一个间距。大概是它整体是79是100吧。

100稍微有些大，那么80。86点小90。对吧，90差不多OK，那么这个钱就在这啊，12P可能不一定够，我们先不着急先给设置，然后再给他加一个这样的啊test，那么这个test的话呢，它的价是它具体的价格，我们随便给一个价格，然后呢，颜色的话呢，也是白色。最大小要调大一点好啊OK，然后它们之间呢，要对齐啊，是要靠下对齐的，所以说我们调一下它靠下对齐。这样的话呢，我们整个钱就能够体现啊，就能体现。好了，那么容器里面呢，还有一个容器啊。容器下面呢，就是一段文字啊，那么我们也不需要额外给容器了，下面又是一段文字，这段文字呢，我们来看一下。就是预估。令须。

配送费。啊，多少多少。好，呃，那么它们的颜色也是白色。对吧，好，然后整个容器呢，我们看一下整个容器呢，它受限于我们设置的这个pending啊，设置的这个pending效果，导致它掉下来了，我们这个painting去掉啊去掉。这样它就会在上面，同时我们让它居中center啊，不是这个居中啊，这个是。他左对齐就好了。我们让。它的主轴向方向是居中的，这样的话呢，它就会在我们呈现区域居中，然后再找到这个容器，那么它的这个90PS还不够用啊。好，那么这样的话呢，我们就把这一块区域给设置完成，然后右手边还有一块区域。

对吧。我们一起来给一下。右手边这个区域呢，我们给一个去结算。它呢，我们就定位定过去吧。OK这样的一个位置，它的宽高度为百分百。宽度呢，我们为这样的25%。好，先这样设置啊，我们待会来看啊，再给他个背景色。字体颜色是黑色，没错，背景色是白色啊，是个绿色零零。CC99。OK，那么这样给的话呢，那么我们很明显发现它就会遮盖掉这个区域啊，所以说我们需要给它再加个圆角。

25。25对吧，那么这样就可以达到这个效果，文字的话呢，稍微大一些些，所以说大小为16PS。然后呢，加个醋。然后他要居中啊，文字要居中的话呢，含高是50PS，然后呢，文字是要居中的，这样呢，就达到这个我们看到的这个效果了啊。对吧，好了啊，所以下面这块区域呢，我们也给大家设置完成，它也是加一个这样的内容，加一个这样的一个圆角，即可达到我们想要的这个效果。OK，我们最后呢，就去咱们的这个真机设备上检验一下，看一下它效果是不是我们想看到的这个样子啊。好了，呃，我们就能看到是不是显呈现这个效果，但是这个。几个问题啊，第一个是。

我们下面去了一个就是它突出少了一点啊，这是因为那个safe area呢，它会导致我们你看呈现的效果会多一些，会上面留白一点，下面留白一点，所以说这样的话呢，就不太好，最外面这个容器还是不要叫C，我们直接去代码里面改会方便一点，直接改成六组件。最外面的容器我们改成U就好了。改成六的话呢，呃。啊，改成六倒倒不用了，因为我们这个图片就得是在这个安全区域内，所以说shift area是没问题的啊，背景色呢，待会我们再调回来就好了，就是下面这里要句的这个边距呢，我们要改一下。也就是说下面这里呢，我们其实直接顶到零就好了，找到最下面这个容器啊。它呢，定位我们定到下面是十，其实下面是零就好了。

零的话呢，就刚好是达到我们这个效果。对吧，达到这效果。然后默认呢，它是溢出隐藏了这个图片啊，溢出隐藏了，我们呢，希望它不要溢出隐藏，对吧，而且这个头要伸出来。那么不要艺术隐藏的，我们尝试啊，尝试去看一下这个容器。他不要有overflow hidden。这里没有，没有的话，我们去这个代码里面改啊，这个容器我们看一下它，它的这个类名是叫V6。我们找一下它的overflow变为黑的overflow为or two。OK，它这里还是被他挡住了，那么就只有最后一个办法，就是这个图片呢，它直接移到外面去，我们自己去定位啊，直接移到外面去。

这个图片呢，直接移到这个view的外面去，我们在外面去自己去定位这个图片啊，只有这样了，然后它的层级呢，我们要把它调的高一些些。对吧，诶它就在这个位置啊，那么这个位置上呢，它的这个定位的话呢，应该是靠波去定位啊，波零。对吧，然后20还不够，20要再加个十三十，PS这样的话呢，就能够还是呈现在这个位置上。我们再看一下。哎，那么这样呢，它就正确的显示出来我们想要的这个，呃效果。那么后续我们要做的就是。在下面再加东西即可。好了，那么我们这个shop页面的搭建呢，先搭建到这儿，那么下节课我们再来给大家搭建剩下的部分。