00:00
在一个新的页面。二。那么这个页面我们来去开发咱们的想要的这个内容,首先第一个呢,我们把页面呢,改成save area啊,这是第一步,然后把它必要的,它自己自带的类名什么的,我们可以去掉啊,当然你不去掉也行,去掉也行。好了,然后呢,接下来我们就开始真正的去开发,它里面就是空的,只有一个save area区域,我们点击这个笔,对吧,进入咱们的编辑区域。那么在编辑的时候呢,我们通常啊,会选中这个区域,把它高度呢,一般来讲都会调成百分百。然后再给他一个往下走啊,往下走下面呢,有一个专门调它的背景颜色的地方,我们可以调它的一个背景色,这样的话呢,就可以跟普通元素进行对比啊,对比就比较明显。背景色的话呢,在这里填一下的颜色啊,颜色可以是咱们的这个啊,这种定制的这种颜色,也可以直接写它的这个颜色pink。
01:02
但是要注意后面是它的这个颜色的透明度,那么0%的话,就意味着它颜色透明,它是完全透明的,所以就没意义,我们设置为百分百回车,那么这时候就能看到,诶,咱们的背景是个粉色的背景。好了,那么我们还会再接着说啊,我们接下来再从上到下去一点点说,然后呢,准备一个容器,准备一个用容器在这里充当一个容器。那么我希望它的宽,呃,宽度呢百分百对吧?高度呢也百分百,那么我们可以选中这个容器给它设置宽高百分百啊,高度的话呢,就不百分百的200PS吧,比方说回车宽度百分百,高度200PS,好,然后这里面呢,可以对它内容进行操作啊,但是我们不着急,先不操作这里,接下来我们希望呢,它跟外面有个边距对吧?跟外面有个边距MAR10PS,那怎么指定呢?来到这里啊,这个文字会比较小,一定要仔细看。里面这个代表它的pendy,外面这个代表它的Mar,那么分别就是在这里直接设置啊,在这里设置是设置它的pen,在下面设置是设置它的Mar,我们直接写写要设置的值就好了,那么四个方向都会是这个值。
02:12
因为我们宽度百分百,而它默认的是咱们的是啊Bo bos啊,所以说我们不设置它宽度的话呢,那么它就会自动的有这个值啊,不要设置它宽度,那么。再设置它的marin是十撇S,然后pen的也是十撇S,这样呢,它就有一个外边距实,内边距实。而这里呢,它的边距是只要你指定啊,就是四个方向都是,如果我们想指定其中一个方向,那待会我们会大家尝试啊,现在先不尝试。好了,然后呢,我们给这个元素一个背景色为白色,那继续往下走。下面呢,有一个调颜色地方,白色是FF透明度百分百回车,诶就白色了对吧?好呃,我们先这样调啊,那么这个元素这一块目前就调好了。
03:00
接下来呢,我们给元素里面塞入几段文字啊,往下走,在展示组件里面有文字组件,我们塞两段文字。啊,一个文字呢,为你好。在文字的属性这里调整文字的这个内容。选中这个组件,在属性这里调整它的内容。你好。第二个文字,我们选中第二个文字,选中它的属性。那有时候呢,他没有选选好啊,这个属性展不开啊,我们要重新选一下,然后这个叫ABM。好,我想实现的功能就是这两个文字水平排列,它不要这样垂直排列,默认所有元素,所有组件它都是垂直排列的,我希望水平排列,这时候就会选中外面的容器view,找到样式,诶,去调它的布局的主轴方向,它默认的是垂直排列啊,我们调第一个肉,它就会水平排列,诶你看是不是水平排列了。然后呢,我们需要水平排列,它居中布局,那么这时候就可以调整这个主轴对齐,在这里调整它居中。
04:06
是不是有了?对吧,然后我希望垂直方向呢,也要居中,那么这时候就会调负轴,负轴这里呢,我们调到这个C,它就会在垂直方向也居中。你看水平垂直其中就这么简单。调一个主轴线负轴C塔,它自然就完成了,是不是,诶这个就是我们用这个可视化变程工具的一个好处啊。下面这个换行呢,我们目前还用不上啊,主要它是它到底这个元素能不能换行那种方式,而我们这里呢,元素太少了,所以说用不上这个换行,如果元素比较多啊,我们可能会用上这换哈。好,我们先看到这里啊,先看到这里,那么布局呢,我们已经把前面这部分都已经基本尝试了一下啊,接下来我们再来调。我要找到这个你好,这个文字,我希望把这个文字距离这个A有一定的间距,那么这时候呢,我们需要调一个Mar right10PS,我希望只有右边边距为10PS。
05:05
好,这时候我们选择这个文字啊,去调到这个布局里面的八,如果你直接写的话,它是上下左右都有10PS,但是我就希望右边有10PS,那该怎么办呢。这个时候就需要点这个图标了啊,这个图标呢,在我这里看的很清楚啊,那么录制视频的话呢,可能会有一些不太清晰,这个图标它目前是个是个绿色的,你点击它。点它一下,它就会变成一个灰色的一个一个图标,那么在这个时候你就可以设置这四个方向的一个。距离的,所以就是它目前一上来默认是锁定状态,锁定状态呢只能设置一个方向,而设置一个方向,四个方向都是同样的值。你再点它一下,它就只能设置它就四个方向都可以分别去指定了,就是我们可以指定右边是10PS,就这样的。对吧,你看这个right的确有10PS。
06:00
所以就是这样的,就是这个就是这样调的,如果你要调四个方向,就直就就在高亮的情况下直接设置就好了,如果你要调其中一个方向,或者其中两个方向,或者是四个方向的值不一样,那么你就把这个去掉。那么再去设置相应的方向就可以了。好,那么这里呢,就是这个布局啊,Marin这样调,Pen也是这样一模一样的啊,不需要过多的演示了,他们都是一样。那么我们这一块就设置好了,设置好了之后呢,我们接下来还可以继续去调整一些内容。那么我呢,在这里再移上一个内容。比方说我们加一个组件。加一个什么呢,我们来看一下。这个按钮吧,来,那这个按钮呢,默认在这,我希望呢,它直接就来到这个位置,这个按钮就在这个位置,我希望在这个位置,那么这时候呢,我希望开启定位啊,把它定位到下面去,好,我们来设置按钮。
07:02
往下走呢,就是定位的选项啊,定位呢,相对定位是相对自身定位啊,绝对定位才是相对于负元素定位,好绝对定位之后呢,我们要去调它的一个位置,想希望往下走对吧?那么在这里调整它的top对吧?Bottom,然后left和right在这里调整。我们希望它波塔是零,就是写零,如果希望和下面有些间距,就调成个10PS,诶这样的话呢,它就会在下面这个位置了。是不是非常的轻松呢?层叠次序呢?在这里调整它的一个基因death的值,如果它被盖住了,可以把它层级调高,让它不要被盖住。好了,所以第一位的话呢,可以在这里进行调整。接下来我们继续啊,我们发现的上面的文字呢,太小了,想调大一点,这时候我选中你好。那么在下面这个字体这里就会调整它的一个啊大小。那么字号就是它的一个大小,然后我们调成30PS,它就变成好大了,含高呢是Li hands。
08:04
对吧,一般来讲我们要做这个垂直,就是它在元素内要居中的方式呢,可用男汉子,但现在咱们这是又不上男孩子。就这个用不上啊,自收的话呢,就是要不要加粗,是不是我们可以按照相应的指令啊去给它加粗。颜色就是它字体颜色可以随意的改。然后呢,要不要透明都行,这个就看你自己了,还有文字对齐方式,左对齐居中,右对齐还是怎么样,还是两端,那么这个文字对齐呢,指的是在它的这个文字区域内啊,它的对齐方式要注意啊,不是说整个容器啊要注意。好啊,那么这个ABM的这个也是可以设置的啊,比如说我们也是为我就小01:25啊,那么它的字字体呢,也加粗啊,那么这个文字也出来了是不是。好了,这里呢,是调整这个字体的,OK,那么接下来呢,我们可以调边框,是不是我们给整个元素这个整个外面的这个V容器呢,我们加个边框,边框的话呢,我们可以调整边框的类型,还有边框的颜色,以及边框四个方向的宽度,甚至他们要不要圆角都可以调。
09:14
好我们来啊,比方说我们常见的呢,就是搜底的,它是个实线边框,颜色的话呢,就是就是黑色,那么透明度就不能是零了百分百,这样呢,它就会一个黑色的一个边框,对吧?然后呢,边框宽度呢,你当这个这个按钮高亮的时候,和上面是一样的,代表它是一次性调整四个方向,四个方向的值都会是一样的,这个一的话就代表四个方向,它的一个这个边框的距离都是EPS。有时候设置呢,它没有设置上啊,或者说我们这里设置设置位置设置错了,我们要重新选中这个元素,然后再设置它的一个1OK。这样呢,就设置了这个元素的一个边框EPS,那么如果我们只希望别的边框有啊,那么一样的把这个去掉,然后呢,选择你想的方向去设置值就好了,但是咱们肯定要四个方向。
10:04
还有圆角,圆角的话呢,我们也是这个图标亮的时候就设置四个方向的圆角。不用带单位啊,单位它会自动补全的,这时候我们也能看到它的确有圆角是不是。好,一般黑色的这个太难看了,我们还是一啊或者CC都行,那么这样的话呢,它的颜色呃,调错了,还是要选中别的啊,然后再调它的颜色,选中它调调的颜色好呃一一的话呢,比较比较透明啊,我们就滴滴滴。其实还是比较透明,诶,我们还是选错了啊,滴滴回车。好啊,大家还是看不到效果啊,但实际上肯定是有的,肯定是有的。好了,那么这是边框,那么下面就是背景啊,背景刚才也设置了,可以设置背景的颜色,它的透明度,设置背景图片它的一个高框,背景图片的其实位置,它的一个重复的一个情况,那么都可以设置,这里我们就不一不一测试了啊,被测试了背景图片呢用的比较少,因为一旦用背景图片的话呢,它不太好去通过GS控制改变图片的值。
11:15
所以一般来讲,我们建议还是用一内置图片,除非是这个背景图它横不变,那么我们可以用背景图。好,这里呢,我们就把样式上面的内容呢,全部给大家演示了一遍,全部它的具体的调整是怎么去调整的,我们接下来呢,按钮为例,再给大家试试这个偏定效果啊。偏离效果呢,去掉这个勾箭头,我们就可以分别给它指定不同的间距啊。回车好,这个时候呢,我们来看一下啊,这个元素的它的一个喷底效果呢,它就会呃不太一样,但是目前好像。没有看出来啊,他这里应该是可能他这里有些延迟,有时候会出现这些情况,其实我们点上去呢,发现它其实已经设置上去了,但是它这个效果上啊,好像没有太感受出来。
12:10
没有太敢输出,但是实际上已经设置上去了,只要这里有值就能看到效果,那么到底有没有设置上去,还有一种方法。就是我们退出这个可视化编辑工具,来到这个代码这里,对吧,这时候看到它有个八等一的类比,我们往下走。来到这里,这时候我们看到它的确指定的相应的Penny,所以这个Penny其实是生效的,只是它上面没有反应过来啊,它这里更新的时候没有反应过来,但是它的确是生效的。OK,那么这些呢,就是所有的样式的调整。好了,那么属性调整的话呢,也可以设置啊,比如说我们给一个元素一个ID,属性在这里就会设置它的IDB天,那么设置上去之后呢,将来这个元素的按钮,它的一个ID就是个B天。然后呢,还有这个什么循环展示,还有条件展示,条件展示呢,你可以理解为就是V干if,它到底是显示还是隐藏,黑的就是显示隐条件展示就是它的是否是v if,它到底是数还是false,那么这里要跟着一个表达式,就是v if的表达式的值是多少,那么你需要定义这个表达式,然后在这里才可以使用。
13:19
条件便利展示的话呢,也是一样的,你要在这里写这个表达式B看for表达式的值对吧,它到底是怎么写。那么便利的元素是哪个?那么你需要写上。那么我们举个例子啊,来去做一下,这里面呢,我们需要定义咱们的这个数据。好,定义数据的话呢,在这里没法定义啊,需要我们回到这个代码这里去定义数据,这样我们才能够使用。比如说我们定一个is so,它为force,对吧,然后定一个persons,它只为数组,数组里面呢放对象,对象里面ID,然后呢,Name为Jack。我们复制一份。再复制两份啊,ID2内为Rose id3为通。好了,我们定义了两个数据啊,我们接着进入编辑模式,我们先下面来便利展示这些内容。
14:12
BD展示啊,来看怎么做,做法呢,就是这样的,我们可以整一个专门的容器来做这个BD展示,或者整一个test吧,我们在这里就BD展示和test,虽然它现在样式呢不是很好看啊,但是我们也可以对它遍地展示,首先它显示隐藏,首先它循环展,我们先测试循环展示啊,点击这个按钮进入循环展示。好在这个JS表达式这里面呢,我们可以直接写我们的逻辑啊,编辑出来的是person b,咱们的这个persons。表达式就是person in person确定好了,那么它就会自动生成,要便利的时候,数据是person,便利的item叫person。好了,接下来的选中文本,文本内容呢?我想展示的是person.name还记得吗?是不是好,这个时候呢,我们可以点击这个按钮,进入JS表达式的模式,我们这里就直接写person.name。
15:05
他发它自动的会生成那个数据绑定的语法,然后展示我们的process name。诶,所以我们这里呢,看似它好像只有一个文字啊,但实际如果我们进行真机测试的话,它一定会显示三个这样的一个名称。好,我们接下来就可以试一试啊。真机测试的话呢,我们需要先把我们的DEMO1调成DEMO2保存,然后呢再进行增建更新。在两更新中,我们可以在页面看效果,你看Jack很多STEM都有。只是我们没有调边距啊,所以靠左靠的比较严重。对吧,所以这个就是条件展示。好,循环展示呢也可以啊,循环展示怎么办呢?我们来继续来操作啊。循环展示。我们呢,比较虚幻的是就是切换这个LVM到底有没有。条件展示就在约明面啊,来到条件这里,我们呢,把它变为椅子受。
16:00
或者说直接把一个变量也行,把这个变量一次受。好。确定,那么它呢,就和这个条件展示就是这个ex的值了,然后我们点击按钮切换收的值来的按钮给按钮把D。事件。来把你点击事件确定,然后指定回调函数,新建函数啊。韩明,Set is,瘦吧。然后呢,下面定义这个函数。对吧,然后呢,这是点塔点is so等于它的一个取反值。OK,写完代码之后呢,我们可以确定好它这个在选择我们跟刚半定的函数就可生效了,好了,功能的话呢,在这里是没法演示的,我们必须要真机实测才能看到效果。来正解,你看这个pen顶呢,其实已经生效了啊,在pen顶已经生效了,它一上已作为for,所以不显示,点击按钮显示,再点击按钮不显示,点击显示,点击不显示,所以这个条件渲染呢,指的就是咱们的这个V杆if。
17:10
好,Disable,就是这个按钮是否禁用啊,这里我们就不一一测试了。我们。所以这一块呢,我们基本上都设置好了啊。数据集呢,指的是那个data杠,因为我们没有使用场景啊,所以这里我们只是简单介绍一下。Disable就是禁用对吧,He就是显示隐藏,相当于V跟受一样的。好,样式这一块我们前面已经看过了,接下来我们来到世界,世界呢,组件世界我们已经给大家绑定过了,除此之外呢,我们还可以点击这个,这个黑色区域就是空白区域啊,我们可以拿到可以绑定API ready API ready,那就是我们API ready事件啊,我们点击这里可以在a ready里面写上我们要执行的代码逻辑,比如说我们一上来就希望他乐一下,Hello,什么呢?Hello。那么他一上来就可以做操作好,我们未来呢,可能要做的就是在这里去写要发请求的代码,请求数据,然后再更新啊点击确定,确定好之后呢,我们只要增加一个新代码,那么就会看到它一下就会提示hello am了。
18:13
所以API ready事件呢,是点击这个空白区域啊,在这里可以把D。还有页面的样式可以调整什么窗口的颜色啊,然后这些状态篮子适应啊,底部篮子适应都可以调,所以这些功能呢,相信大家啊,只要你跟着我们一起啊,把它自己每一个样式都自己亲自操作一遍,那么你自然就能知道它的到底是能干什么用的。好了,以上呢,就是我们右手边这个导航它的全部内容。
我来说两句