00:00
同学们大家好,上节课呢,我们已经开发出来了,是咱们整个应用的底部导航ta对吧,那么这节课呢,我们先来开发首页的这个功能。好了,那么这一块呢,就是我的整个手机的一个投影,就是我们现在运行的整个项目,那么我会一直放在这。接下来呢,我们来开发首页的静态组件。找到原型图,打开home.jpg这个文件啊,这个呢,就是我们首页的这个原型图了。OK,那么首页呢,长这个样子,我呢通过截图工具把它截个图,这样呢我就会把它贴图贴在这个位置。未来呢,我们要进行啊,看效果的话要去画效果,就照着这个圆形图去画就好了。那么在开发静态主机的时候呢,我们首先啊,需要对咱们这个代码的这个结构进行分析。我们先分析出结构,然后再考虑该怎么去完成,也就是说先进行设计,再进行完成代码,这是一个很好的习惯。
01:06
那么整个页面结构呢,其实非常清晰啊,我们一起来看,首先上面呢,它是一个搜索区域。对吧,然后中间这一块呢,是一个分类列表,下面是一个分类,是一个食品列表,那么再下面呢,就无所谓了啊,再下面它是是我们已经做好了,这个太慢。OK,其中呢,这里面呢,需要注意的就是这个分类列表和这个食品列表是可以滚动的,所以它需要包一个sc view组件啊,包一个可以滚动的这个组件,而上面这个位置search呢,它是要固定在这个位置,不要去动它。所以这是大概的页面结构的划分,有三块区域对吧,我们呢,可以定义成比方说三个组件。然后呢,其中上面这个组件是单独一块固定定位啊,把它定位在上面,但实际上呢,我们这个里面没有固定定位啊,我们要通过绝定位来实现,然后下面这个分类列表和实体列表呢,它需要包裹在一个可以滚动的这个区域里面,这样就可以完成我们小的功能了。
02:11
好了,那么话不多说,我们接下来就来去实现它。打开我们代码,找到我们的这个home组件啊,在这里呢,我们再去定义三个组件,分别是上面的search,中间的这个分类表,下面的这个for OK,我们一起来看啊,首先我们给整体呢定义一个类名吧,比如说这叫配。它呢,我们要做的就是高度百分百,然后给它一个背景色,我们给它一个背景色,就是这个绿色啊。玲玲。99CC200CC99。OK,那么我们这个绿色就整好了,为什么我们要给整个页面一个背景色是个绿色呢?这个原因就在这啊,因为我们希望这里这块区域它也得是绿色的啊,那么希望这块区域是绿色的,那就要给最外层区域包裹这个东西,而不是给这个search,因为如果你给这个search总结做的话,因为是这个安全区域内啊,所以整个呢,它是并不包含上面这块,就是这块导航区域的。
03:14
所以这里要注意一下,那么我们现在哎,写了这个代码之后呢,我们可以把它啊增量编译一下,那么在这里我们就能看到其他的效果,哎,它就变成绿色了,对吧?然后下面呢,它的背景色不是绿色的,后续我们通过组件去设置诶即可完成。OK,沙面变成绿色就好了,接下来呢,我们去分别定义这几个组件。这里我们就要再说一遍这个目录结构啊,配S里面放置的是这些路由页面,也说对应的每个页面的组件我们会放在配置目录,而卡放什么呢?卡就放置着我们这个页面拆分出来的组件呢,我们可以放卡下面,然后我这个命名习惯呢,通常情况下我喜欢这么命名啊,比如说我就叫啊home干什么什么啊,比如home干search代表是home中的这个search组件。
04:05
全定创建啊,然后下面呢,还有几个组件,我分别创建一下,我直接新建文件啊home干carry。STM。然后再接着还有home.please please。好了,那么三个组件其中的home search呢,它这里提前已经写好了一部分内容啊,我们也可以直接用,这里面呢,你用不用那个save area都无所谓了,因为外面已经用了好,这里面的生命周期呢,我们目前也用不上啊,先把它去掉,我们只留一个最基本内容。OK。这块区域呢,是叫search。好,我们先完成这个search组件吧,其他组件的话呢,我们后面在一点点完成,呃,先来去写,Search组件呢,它分为左边一块区域,右边一块区域对吧?好,其中右边的话呢,它其实整体是个输入框啊,输入框之后呢,在这里我们增加一个搜索的一个文字对吧?那么右边呢是左边呢是有一个文字加一个按一个icon图标组成啊有两部分组成,它首先分为一左一右。
05:20
我们先报两个容器啊,左边的话呢,首先是一个文本test。角我就写的深圳了啊,右边是一个图标,我们可以用我们的image组件来渲染这个图标。好,这里要注意啊,因为我们是用的是这个。呃,APP模式啊,我们开发的是这个native APP,所以说呃,我们这个image呢,指定这个路径的话呢,得用place holder。这一点呢,在我们的文档中其实有体现啊,我们打开代码。打开代码之后呢,找到这个abm GS的这个文档,再找到这个。
06:03
呃,Image的文档在哪呢?我们看一下在这啊,Image文档我们看一下SC,注意它的可用性呢,没有标明是在哪里啊,好,Place place hold的话呢,只记清楚了,是在APP中可以使用,所以说我们用这个place holder在这里就可以去渲染这个图片地址。那么图片地址怎么写呢?这里要特别注意啊,就是我们写图片地址的话呢,正常路径就是点点斜杠回头里程对吧,然后找这个image目录。然后再斜杠啊,下面呢,我们找这个home home下面有个箭头。正常写路径呢,就是这样写。点PNG啊,这边写东西是这样写好,这时候呢,注意啊,我们要把它再重新编译一下,增加编译一下,但是这个时候我们去看的话,呃,这个组件我还没引入啊,这里我们还差一步,我们还需要在home这里面把这个组件进来再使用。
07:02
啊,Import引入组件的话呢,只需要写啊引入它就好了,不需要写其他的内容。OK,引入好组件之后,组件就可以直接使用。好的,我们把组件用上,再进行代码进行增量编译啊。OK,这时候你能看到这个图标呢,并没有出现原因就是呢,我们写图片路径啊,它必须要多回头一层啊,就是相对是固定写法一样。必须要多回推一层。OK,这样呢,才能够最终我们再增加B意向。哎,它才会有这个图片对吧,那么这个图片呢,当然我们这个大小还后续还要做调整啊,这里要注意特别注意就是我们路径呢,将来写不管你是什么组件啊,那么路径的话呢,至少都要回退两层才可能找到这个图片才能够使用,所以这一点要稍微注意一下。
08:06
OK啊,把这个图片写好了,图片也整出来了,这里其实还带来一个问题,就是当我们每次修改完代码想要看效果的时候,我们永远的右键去这样编一下,这样的话呢,就很麻烦。这个效果的确有啊,但是会比较的麻烦,在这个深圳这里啊,他这的确有。为了大家看得更清楚一点,我看能不能再放大一点点啊?对吧,大家看啊,在这里就会有这个内容,好,但是这样的话呢,太麻烦了啊,所以教大家一种方式,在这个齿轮这里有一个设置,设置在这里直接搜SYC。对吧,SNC的时候呢,在这里就会有一个apilo的一个auto think什么意思呢?就是它会自动的进行WiFi的增量同步,也就是说只要你保存代码的时候,它会自动的去做这个事,就不需要你每次再去重新的去运行一下,这样会简单多了啊,我们把它勾选住。
09:01
搜SYC就好了,把它勾选好,勾选好之后呢,我们再试试。此时我们把这个波浪号去掉一保存,诶,你看它就会自动变异,自动刷新,这样呢就会非常的方便,开发起来就会比较快捷。好的,接下来呢,我们继续写啊,按照要求呢,我们还有一个input输入框,对吧。Place order。是请输入啊三加。名和品类。OK,那么只是这样的话呢,你在输的过程中,它会频繁的变异啊,当然没关系啊,没关系,好了,接下来呢,我们下面还有一个文字这样搜索。好了,呃,那么我们这样呢,就基本上完成了整个整个页面的结构,下面我们进行布局,首先这块区域要横向排列,而默认情况下呢,咱们所有的这个。
10:11
组件或者所有的这些内容啊,它都采用了display的一个flash的一个布局,而flash布局呢,它默认是垂直方向布局的,所以我们会呈现成这个样子,我要水平布局,那么我们要对这个色这个类名进行操作了啊。水平布局呢,就是direction为肉啊,它就会把它由一个。对吧,把它我们的布局的时候变成一个水平方向,诶这样的它就会水平方向的一个布局,OK,水平方向布局呢,其实指的是这个容器和这个容器水平方向,但是我们说了每个容器它默认都是垂直方向,所以里面还没有变,里面要想变化的话呢,还是一样要做一些处理。好,这个是色的这个。一个区域的一个容器。
11:01
下面这个呢,我们是search的input的一个容器。好了,他们其实都有一个共同的一个需要操作的一个事儿,就是他们也是要去做这个的。Fla direction肉,还有下面这个也是Fla direction肉。好了,接下来呢,他们就水平排列了,接下来呢,我们要做的就是把文字对吧,把文字的位置,还有相应的内容都进行一些调整啊,让它不要这么大,首先给它一个高度吧。高度我们假设为550PS,给它一个背景色,这样呢我们才能知道我们整块区域它是在哪个位置,诶大概就在这个位置,我们甚至还可以尽可能对齐一下,到时候来比较一下,诶这个位置刚刚好大小是一样的,然后呢,这个字体大小的话呢,我们可以到时候进行一些调整,以及这个图标图片啊,肯定是要进行调整的,Class,我们呢就叫such image。
12:08
Such a。一个箭头。好,这个箭头的话呢,它的宽高要调小一点,比如我们调成10PS。OK啊,宽度的话呢,不要十,高度十是没有问题的。高度甚至还要再小一点可以对吧,高度还可以再小一点。啊,反正就是你可以做一些调整啊,调整它一个合适的效果就好了,然后呢,他们要垂直居中,要垂直居中,然后呢,要水平排列垂直居中,OK,那么垂直居中的话呢,我们找到这个search area wrapper把为center,把它们垂直居中就好了。OK,他们就垂直之中了,然后跟右边的稍微有些边距啊,我们来个Mar right来个10PS吧,不要靠我靠的这么近对吧,然后呢,这个箭头的话呢,跟左边也要稍微有些间距,Mar来一个。
13:14
我我们看效果。呃,会稍微有些大,但是这个可以调整的,以及整体呢,我们整个容器也应该有个盆底,上下是零,左右是十,PS不要靠的边靠的太近了。好了,那么接下来我们去调整这个input的一个高度啊,我们来去给它一个类。我们叫做search input。往下走。30INPUT的高度的话呢,我们也为48吧,或者是50都可以啊,我们可以不要整的太太多。或者40好吗?40然后呢,也是要垂直方向是居中的。
14:07
宽度呢,我们就撑开百分百。OK,宽度呢,百分百了啊,那个搜索按钮到时候可以去改变好,那么对这个区域的搜索的话呢,首先它这个文这个框距离要有,然后呢,以及有个圆角啊border radiOS。来一个5PS,我们看效果以及呢来个喷。PA顶的话呢,上下的话它已经居中了,上下的话我们为零左右来个10PS。OK,这样的话呢,就和这个书框差不多了,虽然这个宽度没有再次撑开啊,但是后面可以进行调整的啊OK,呃,这个深圳这个文字我们后面来调整,首先这个搜索的话呢,我们要定位定上去,所以搜索按钮我们要给他一个plus。Search text搜索文字。
15:04
它是要定位的position weut,所有元素的默认都开启了这个相对定位。所有元素都默认开启相对定位,所以你直接开绝对定位就好了,绝对定位的话呢,我们rise,比方说为呃10PS,我们看效果。诶,它就会在这个右边啊,在这个右边对吧,这样就和区域就对上了,Right为10PS之后呢,我们还需要给它一个波的left啊,给他一个EPS的一个这样的一个像素对吧?就是这样的一个像素,然后这个高度的话呢,我们后面可以把它调的低一点点,高度的话就不要这么高了,比说我们可以为呃20。对吗?20可能都太高了。15。
16:02
OK,可以调整啊,当然这样调太小的话呢,我们这个文字呢,它也不见了,所以我们可以定义一个区域去做啊,如果说你选这个线就是要小一点的话,我们可以不要去调这个高度啊,我们可以再去整块去用它去定位。而这部分内容呢,它其实就是一个。六啊,就是一个高度是这样的高度的一个一个线啊。是一个lie。也是采用定位。只是它的定位的这个距离呢,要稍微的大一点。它的宽度是1PS高度的话呢,比方说我们定成20。然后下面这个border就不需要了。给他一个background color是一个是一个这个这个颜色,那么这个颜色到底是什么颜色呢?我们要去看一下,这里我们需要借助一个换一个取色器来取一下色,取色器怎么用呢?我们打开任何一个网站,右键检查啊,一旦右键检查的话呢,我们在这个右手边就能找到任意一个颜色,点击颜色CH浏览器自带的一个取色器就在这啊,点击选中取色器,我们选择对应的颜色,点击它在这里就能得到这个颜色了啊,这里得到颜色非常的方便。
17:23
OK,我们再回来,在这里把颜色进行修改。好了,那么我们也应该有这个意思了。OK,我们来找一下它在哪里啊呃,宽度为EPS,高度为这个20。OK。我们一起来看一下。这个图片好像没有找到它具体的一个位置啊,这个。我们看看是不是30不够,我们来个60。
18:05
OK,其实就在这个位置啊,在这个位置。对吧,我们要20PS可能都太多了,我们15。或者16PS刚刚好,然后呢,它的位置。位置上呢,我们要做些调整啊,Right right的话呢,不要是60,我们来个50。好,其实它已经在这了,只是这个颜色呢,它没有这么显形啊,其实在这里已经出现了这个颜色,那么如果说它这个颜色太浅了,我们还是调深一点的话。好了,我稍微调了一下,它颜色可能会深一点啊,在这个位置还是能看到的啊,就在这个位置,甚至你简单一点就捏捏,那么你一定能看到有一根线,它就在这个位置,对吧?在这个位置啊,这个可以自己调整的好了,呃,那么这个文字呢,它没有。
19:04
上面这个文字呢,它这个区域啊,没有撑开啊,我们要给这个area这个宽度呢,还是要改善的。它宽度呢,比方说我们就为100PS吧。看看100PS是多宽?OK,太宽了,我们再给60。好60差不多啊,那么这个Mar其实都可以不用了。诶不行,没有ma,它整个区域还是不够好了,那么这块区域呢,我们就把这个组件静态组件给定义好了,搜索文字,包括这根线啊,然后以及整合内容都已经完成了。完成完之后呢,这个pink颜色就可以拜拜。好了,那么到这里我们就完成了头部的这个such。
我来说两句