00:01
好,那我们继续啊,那我们个人中心页呢,整完了以后呢,那从这节课开始呢,我们去看什么,看这个视频页的内容啊,那首先要整视频页的内容呢啊,来到我们的项目里边啊,我们需要呢,先将我们视频。页页面这个路径呢,我们提到第一位啊,那这样的话呢,是方便我们之后的调试,每次刷新完之后,还是编译完之后呢,它先加载的是视频页。好的,那现在呢,我们的视频呢,是没有什么东西的啊,没有什么东西的,来来到我们的代码部分。哎,找到咱们视频样的结构,哎是它,那么这里面的东西呢,啊,我们就撤掉了,这里呢,我呢先给它整一个包裹器。呃,Video的container,好的,那现在呢,这个包裹器有了以后啊,大家看一下,呃,那现在在视频页你看啊,这写的是硅谷云音乐对吧,那在我们,呃,当前的项目呢,我如果说想改一下它的标题的话,那我们可以再view点。
01:01
哎,Jas文件中呢,去修改,那如何去修改呢?app.jason中啊,我们找到这个标题。设置选项,然后呢,来到我们当前的页面,那要修改的话呢,也比较简单啊,那这呢,你比如说我就改成视频页啊,那这个呢,之前这种操作我们也做过啊,也做过。来把标题修改完以后呢,啊,接下来呢,我们去当一下页面里面的内容,首先呢,我们先写的是啊头部去。OK,来一个拍,那么头部区域呢,大家看一下它都有什么东西啊?左边一张图片,右边一张图片,那么中间呢,是一个搜索框啊,那么这个搜索框呢,对应的其实是个假的搜索框啊,当我们点击搜索框的时候呢,它就会跳到我们的搜索界面啊好,那现在呢,呃,在。我们的视频啊,我们先去搭一下这个结构并不难。那左右两张图片呢,我们先整两个image啊,复制一份,然后呢,在它的中间呢,有一个搜索框,我们这呢,就叫它一个search呗。
02:06
嗯,那这个呢,也不难好的,那么左右对应的图片呢,分别在哪呢?在我们下面啊,Image里面左边的图片呢,这有个video。哎,是他啊,对的呢,是这一张。那这个呢,是我在网上随便找了一张啊,右侧的图片呢,是网易云页的logo啊,那么对应的呃是在哪呢?是在外面,在images下面呢,有一个logo.png啊,那现在呢,我们就去加载这两张图片啊呃,首先呢,我们去到static下面呢,找image下边啊,然后找这个video。啊,Video下面的什么呀,叫video.jpg。好,右侧这张来我们也写一下啊,那就是image下面的logo.png。啊,那这是左右的内容。没有问题啊,那中间这呢,那我们也整一个啊。
03:02
呃,那其实中间是个假的搜索框,假的搜索框,所以呢,我们也可以干嘛呢,你可以直接写一个,呃,搜索是商品,因为最终点击它呢,肯定是要跳转的啊,或者说啊,有的网站呢,也会在这写一个搜索框,就input。啊,Input,那在这里呢,我们也可以直接去写它的文本,都没有关系。好的,那现在。哎,我们把这些收起来,我们去写一下它对应的样式啊来,那这个时候呢,我们打开样式文件,嗯,把这个呢,给大家挪到什么右侧,哎,Move right来我们对应的去写。那首先啊,我们要。找到我们包裹器啊,那下面的handle,它里面呢有三部分内容对不对,我们呢,先去设置一下这个图片的大小来。移上去啊,30乘以30啊,所以呢,我们应该先要设的这个。
04:05
呃,它下面的图片。嗯,实际上是它的图片啊Y,那就是60RPX啊高的话呢,也是60RPX,嗯,没有问题,那除了这个图片的大小呢,大家再看啊,呃,这三部分内容是不是要水平排列,而现在呢,因为我们有一个无U的元素啊,你会发现它是纵向的,哎,它是搜索产品这的这个块的元素。那么想让它横向排列呢?也很简单,我们需要给这个头部,哎,去设一个样式,你就display对吧,Flex OK,那我们看一下效果。好,这个时候呢,大家看啊,这儿呢,已经横向布局了。那么横向布局了以后呢,为了让大家看的清楚一点呢,我给中间这个搜索框呢,啊,在这里我也去,我去给它加一个边框,让大家看的清楚一点。That。
05:00
呃,头部,呃,下边的这个search,嗯,我们来一个border,哎,对应的ERPX啊,然后来个solid,哎,井号一。OK,那这样的话。我们再看,嗯,边框是有了啊,边框是有了,没有问题。那么这个边框有了以后,大家看我现在并没有设置它的宽度。那这个时候呢,是不是有内容撑开的呀,而我们最终要做的效果呢,是。图片宽度其实是固定的在两侧,而中间的搜索框的宽度呢,我没有写死啊,它呢是根据不同的机型呢,是自适应的。哎,这种呢,哎。是比较典型的一种布局呢,就是两边固定,中间字十音。对吧,那按照我们常规的写法呢,我们可以用什么用双飞翼布局。啊,我们也可以用什么用圣杯布局,那么在这里呢,我们还有一种方式啊,就是我现在呢,可以用flas布局去搞定这个问题啊,那这个时候大家看我怎么写啊,看我怎么写。
06:10
那首先呢,我们给我们这个伸缩核模型啊,那这呢,不是有display flex了吗?那么接下来。嗯,接下来我们去给这个search,这呢,我去设一个啊flex为一啊,或者说是o two啊都可以,我先写个flex为一,我们看一眼。那这个时候大家能看到啊,这个搜索框呢,被拉长了。被拉长了。而且呢,在不同的机型上啊,它会自动的去变换,你看当我到6PLUS呢,它又变得更长了,没有问题啊,我们切换到678,那它就会小一点,而两边的两个图片是不是左右啊,已经是固定了在左右两侧。那么这样一个flagx为一呢,为什么就好了呢?啊,这里呢,给大家说一下这个flex唯一啊。那其实所谓的flex唯一呢,它默认的呢,有三个属性啊,我们说flex啊,对应的是三个属性。
07:07
这三个属性呢,分别代表的是Alex。嗯,它的默认值呢为零,然后呢,还有一个是flex a。嗯,它的默认值为一,还有一个呢,啊,是我们的Lex啊basis,它的默认值呢是o two。哎,它的默认值是o two,那当我们设置这个哎,Flex为一的时候,那意味着什么?意味着我的flex grow。啊,它的为E,它为E啊,那在这里呢,啊,我们说这加了个flex呢,这呢代表的是0%。呃,还有一种想法呢,也给大家说一下吧,当这flex呕吐的时候呢,哪儿不一样呢?哎,就是后边这一个,这里呢是呕吐。嗯,那这三个分别代表什么意思呢?啊,我给大家加到上面啊,加到上面啊这个flas grow呢,代表是可拉伸。
08:03
嗯,可拉伸。嗯。而呢,它呢代表的是可压缩。哎,可压缩啊,那最后一个呢,Flex basis呢,就是在。来给大家把这个O度去掉啊,它呢是代表的是自身的宽度,哎,当铁元素的宽度,或者叫当铁元素的宽度。哎,元素的宽度,那这个时候大家要注意啊,它的默认值,嗯。Flex为零,说白了它默认是不允许拉伸的,但是可以压缩啊,如果说你的宽度不够了,你的这个元素。会被压缩,而默认的是凹凸,凹凸的话呢,其实就是自动计算它自身的宽度啊。嗯,来自动计算它的宽度,那这样的话呢,当我们为凹凸的时候呢,它会根据这个它里面的内容来决定它自身的大小。
09:05
当然了,如果是空间不够,那么里面的内容决定不了它的大小了,这个时候会被压,呃,压缩,那当设置flax为一的时候,代表这哥们。哎,这哥们儿。那它呢,可以被拉伸。啊,而且呢,这个时候大家看啊,它的基准值的是0%,说白了它是不以自身的元素,自身里面的内容决定的,而是由我们伸缩和模型的剩余空间来决定的,如果说啊剩余的空间足够多,那么它将会被拉伸。将会被拉伸,而且当我们设置flax为一的时候,哎会导致我们的哎深缩合模型也是它的负元素的宽度啊自动啊为100%,那这样的话呢,相当于是啊我们整个头部呢,自动占呢我们屏幕的整宽整宽,而图片这呢,我们已经定宽了。
10:00
都是60,那么剩下的空间呢,都会给到什么,给到我们这个search,所以大家能看到,诶,Search现在什么自动的占据剩余部分的空间呀。哎,使这样的,那么现在你看啊,它跟左右的图片挨的太近了,你也可以干嘛呢,剥夺一点它的这个距离,比如说我们来个market,左右给他来20个像素啊,然后呢,上下为零,哎,上下为零。嗯,啊的上下为零,应该在上面啊左右,我们来20啊,OK,那这个时候呢,我们再看一下。大家看左右就有一点边距。好的,那这是这个,那么接下来呃,我们再去设一下它里面的字体大小,比如说为26啊,R撇X呗,然后呢,Text line,嗯,Center,哎,那这些呢,都没有问题啊,那呃,再来啊,还有什么,其实我们可以设一下它的行高,行高应该设多少呢?应该设60,你就垂直居中,现在呢,我们没有设它的操作,但是图片上有,所以呢,它默认的继承的是负元素的100%嘛。
11:05
OK,那这是这个啊,这里呢,重点呢,大家要知道啊,我设flex为一的时候,基准值0%,而如果是o two的时候呢,那这个f flagx basis呢,这是o two o two的话就是根据首先根据自身啊元素来计算它的宽高大小。好,那这是这个,那么里面呢,对应的这个字体颜色啊color呢,我们也可以给它来设一下它的这个颜色吧,那这个对应的颜色呢,我们可以到之前这个里面呢啊,去给大家取一下啊去取一下来。现在啊,我们选中它,嗯,然后呢,我们往上拖一点啊,找到这啊,我我去给大家找一下这个颜色啊,那这个颜色呢,我是通过please holder设置的啊在这里呢,我们还直接看不到啊,直接看不到,那这个颜色呢,我们直接就用什么用我们官网的主题色。
12:01
OK啊,对应的呢,是哪个颜色呢?是这个颜色。来啊,我们复制一份给它拿过来放到这里好了,那这样的话呢,我们再看一下,嗯,就差不多了,然后啊,图片呢,跟上边跟左边啊,包括右边的挨的太近啊,那这个时候呢,我们选择给我们的头部呢,呃,去加一个pad比上下为十个像素,嗯,上下左右呢都为十。那这样的话呢,向你挤一下元素啊,会好看一点。哎,是这样的,好的,那这节课呢,我们主要是进行了这个头部的搭建啊,不能那么这里面呢,提到一个flash为一啊,那这个呢,大家要重点掌握一下,好的,那这节课呢,我们先讲到这里。
我来说两句