鸿蒙开发：相对布局RelativeContainer原创

Hello喽，嗯，咱们这个视频主要给大家去哎阐述一下哎在鸿蒙开发当中，哎我们如何去使用相对布局哎relative container这个组件，嗯，其实如果说大家哎在升级了新的IDE之后，其实大家可以发现，哎我们在创建一个新的项目的时候呢，啊官方已经默认呃把那个根部局，也就根组件由原来的column姆切换成了哎，Driver to肯的啊这个组件作为一个根布局，其实由此可见呢，其实呃，Relative container它的组件在咱整个一个鸿蒙开发当中的一个呃重要性其实相对于其他的一个呃容器组件的啊，它的出现主要是解决了我们一个实际开发中的一个重要问题，那就是说在复杂的一个场景中的呃子元素的一个对齐的一个情况。行，嗯，这里呢，我也给大家准备了一个文档，咱们本次视频呢，主要是按照这个文档，然后重点给大家呃，去讲述一下。

好，咱们咱们咱们本次视频呢，呃主要是基于那个API13啊，我们主要去讲述哎，我们如何去使用，哎，我们相对布局，哎，比如说我们一些使用规则，第一步比如说ID声明，第二步就是我们的一个位置摆放，那么关于位置摆放呢，也给大家举了几个实地开发中的几个案例，比如呃居中案例，比如说我们的呃居上啊还居下以及居左，比如居右。同样的，嗯，也给大家去阐述一下它的一个啊，如何去一个对齐的啊，一个位置一个属性啊行，那咱们就开始本次的视频，嗯，这个呢，前面已经给大家说过了，就是最新的IDE啊，已经默认把那个我们那个相对酒店作为我们一根布局使用了。

那么这里有一个，这里有一个，嗯。小小案例啊，就是说在这个案例当中，比如说组件3对吧，它的左上右下都有4个组件，那么如果说我们没有对吧，呃，Relative, 肯定的这个组件，那么我们该如何去实现呢？定对吧，肯定我们呃会有很多种方式实现，比如说我们第一个对吧，采用一个啊入肉布局的横向布局，哎，组建一个组件二一个具左一个就那么在采用一个组件三下面呢，也是一个横向布局，本个的一个根布局，我们可以采用一个是column，其实我们可以发现啊，我们会使用嵌套组件的形式，然后进行实现，对吧。嗯，当然有了这个呃相对布局哎relative肯之后呢，其实我们直接呃相对于哎这个词组件进行摆放就可以了，我们就不用说呃有那么多的哎组件套用进行实现。

那当然了，最后的话啊，我们也会去实现一下啊，我们这个案例。好，这个案例的话，我们会放到最后给大家去实现啊，那么我们如何呃去实现一个那个radio contain的一个组件的一个相对位置摆放的，首先第一个就是我们的必须得有ID，比如说我们有两个组件对吧，A组件，诶，它需要在A组件的右边。对吧，那么B组件对吧。B组件是如何知道A组件的一个位置呢？其实在咱们相对布局当中，会通过给组件啊去设置唯一的标识ID来标记每一个组件，对吧？这个ID呢，就相当于我们的一个身份证对吧？你对吧，出门在外对吧，你去买票也好，你去乘飞机也好，那么怎么样去标识你这个啊，人的唯一呢，一般我们都需要需要人的身份证啊或者护照啊等等对吧？那么设置ID呢，其实是非常重要的，如果说没有这个ID。

我们对吧，其他组件相对于你这个组件就缺少一个锚点组件，那么在相对物体相对布局当中呢，我们就无法去实现对吧，位置的一个相对摆放，那生命ID也是很简单，这个是通用属性，每一个每一个组件呢，无论说你是文本组件还是图片组件都有一个ID属性，所以声明ID这个是非常非常重要的，这个大家一定要记住，如果说你如果说你这个相对布局组件只有一个组件。我们可以不声明这个ID，但是如果说你有相对于某个组件对吧。进行摆放，比如说我相对于这个组件，在这个组件的左面右面，上面，下面，那么我们就需要用到这个ID的，这个大家一一定。

要知道第二个呢，就是一个位置摆放。位置摆放，第一我们通过ID来确定了我们的一个啊锚点组件，那么相对于这个锚点组件，那么我们是在它的左边呢？右边还是上边还是下边，那么就需要控制其对应的一个位置，那么就是通过CLA rules这个属性来控制当前的一个位置。它里面呢，有很多的属性，比如说我们有左上右下，还有水平基的垂直经等属性，每一个属性对应的有两个参数，一个是安克对吧，这个参数呢，就是你的锚点组件，还有一个是。Online也就是位置，那么相对于你这个锚定组件对吧，它是在左上右下，那么基本上代码格式呢，就是一个什么online roses里面有我们的属性，每个属性里面都有一个uncle，它是对应的你的锚点组件，好第二个是online，就是你的位置啊，首先呢，如果说你的安格设置为肯定的，就是两个下划线对吧，一个一个肯定的，然后后面也是一个双下划线，那么它对应的就是一个相对的一个是负组件。

对吧，如果说我们是一个确定的ID，那么这个I我们就可以把这个安口设置为我们确定的ID，就相对于某个组件而言。嗯拉呢，分为那个纵向和横向对吧，它会用水平方向分为什么。啊和LA start就是左center中and右分别代表的是左中右，如果垂直方向的是VQ了，对吧，它代表的是上中下。OK, 那我们就以呃简单的几个案例，然后我们去熟悉一下，对吧，我们在呃，Relative container, 也就相对布局里面如何去实现这个组件的一个。

咱们用画的方式啊，然后给大家去实现一下。好，这个呢，就还是以前的我们一个DEMO工程啊，我们去实现一下，首先去实现一个呃，居中的一个组件，OK.嗯，首先呢，我们就要把这个根布局对吧，切换一下，切换成我们的一个主任的题目。OK, 那么我们呢，就要去实现一个呃，居中组件，哎，我们直接用一个文本组件吧。S.组建1。呃，我们给他一个。看。宽为100。然后呢，我们再给他一个高。

高位一带。这里呢，给他一个背景颜色吧。那颜色掰掰个干那么卡了给他一个。红色right。OK, 我们让我们这个它的文字也居中啊，改到了。对，亮点3来。我们去运营一下。首先呢，我们没有给它设置任何的属性，它的默认情况下应该是从左上角进行显示的，来我们看一下是吧，它就是在左上角，我们如何让我们这个组件一进行一个居中对吧，相对于我们的嗯窗口对吧，进行一个居中，怎么去居中呢？哎，我们说了是通过它的一个什么。啊，来入属性对吧。它有里面有很多的属性，比如说左上右下，那么怎么样让我们这个对吧，组件一进行。

居中呢，首先呢，它有四个属性，具有top属性，还有是一个bottom属性，还有left的属性，一个right属性，我们只需要让它怎么着，既居上又居下，既居左又居右，那么是不是我们就实现了一个居中的一个位置，来我们先看一下。首先呢，它有，嗯，先让他居上。垂直句中它有top水。Top属性里面有两个参数对吧，一个是uncle。安呢，就是我们相对于负容器对吧，肯定的。居上。嗯。它是一个vehicle。和烂属性。

I a there.好，OK.然后呢，再给他一个。居下不痛。嗯。它是一个不同。OK, 来，咱们去运行一下，看一下效果，那么既居上又居下，那么它就是一个垂直居中，哎，我们可以看到我们的组件一怎么着已经相对于我们的窗口已经垂直居中了，那么水平居中呢？那很简单对吧，既居左又居右。我们直接复制一下。他是一个horizontal。我是一个right。嗯。

来，我们再去运行一下。好，已经运行起来了，我们看一下效果对吧？那么这样既居上又居下，既居左又居右，我们就实现了一个组键的一个居中方式，对吧？那么有没有一种其他的更方便的方式啊？哎，是有的，那么我们通过还左上右下四个属性的实现了我们一个组件的一个呃居中，除此之外呢，在我们的一个案roots里面呢，其实还给咱们提供了两个属性，一个是哎分的属性，还有一个是哎密属性，那么三的属性呢，就是我们一个垂直居中的一个属性。来，我们把我们刚才这4个属性给他。注释一下，它有一个什么center。OK.也是我们呢有一个。安可对吧，相对于负容器对吧，它有一个维克，有一个center，那么这就是我们一个，哎，垂直居中。

还有一个是。首先叫me。就是我们的一个水平这种。我们复制一下。Center.来，我们去运行一下，看一下效果。好，我们可以看到小狗跟前面我们使用左上右下四个属性是一样的，也就是说在我们使用垂直镜中的时候呢，其实我们完全可以使用啊center和me这两个属性来实现我们一个组件的一个垂直集中，OK, 咱们把这个给它删除掉吧，OK, 这是我们的一个组件一对吧，组件一是一个啊，垂直于中，那么我们再去怎么着再去写一个组件，让这个组件呢在组件一的。

上面，那么我们该如何去实现呢？OK, 对吧，这是组件1对吧，我们再去复制一个组件。你把这个给它取消掉，除以2。给他一个，呃，组件上给他一个orange橙色。OK, 我们如何让我们的组件2，我们先去运营一下。我们如何让我们的组件2在组件1的上面呢？首先呢，哎，我们就需要用到前面我们所说的对吧，两个规则，第一个规则是什么。标识ID对吧？首先呢，我们需要在这个相对不需要找到一个锚点组件，也就是组件1，我们如何找到，找到这个组件1呢？就是通过什么通过你的ID，那么我们就需要第一步啊，给你的啊锚点组件设置一个什么身份标识，给他一个ID。

没有1OK，嗯，有了锚点组件，我们需要让组件2怎么着在组件1的上面，那么我们还是需要需需要一个什么位置摆放，就是一个函数。那么如何让组件2在组件1的上面呢？哎，是不是，哎，我们通过什么online ROS里面的属性，然后去控制我们组件2的一个摆放，首先呢，组件二在组件一的。上面位置是不是就是意味着我们组件2的下面是谁啊，下面就是我们的锚点组件对吧，没有一个不同。

OK.当前组件的下面。安格是谁呀？是我们的组组件一对吧。OK.然后我们给它一个拉鹅拉呢，就是相对位，就是位置相对谁呢？相对组件1，它是在组件1的上。哎，我们可以去运行一下。诶，我们可以发现我们组件二呢，已经在组件一的上面呢，也就通过一个bottom对吧，它的bottom也就是当前组件二的下面是谁啊，是我们的组件一，呃，好拉呢，相对于组件一，它是在组件一的什么上面，OK, 这个是没有问题的，那么还差一个属性怎么着水平。居中，那么水平居中我们可以想到怎么有两个数，有两种方式，第一个是剧组的右，第二个呢，使使用使用什么使用我们的一个me。

OK, 你把它复制下。也就是说相对于我们的一个负容器而言，我们是一个水平居中的位置，我们去运营一下。哎，我们可以发现我们的组件2呢，怎么着已经啊实现了在组件1的一个上面，OK呢，我们再去实现一个组件，对吧，让我们的组件呢，在。组件1的下面这个，我们该如何去实现呢？来，我们再去复制一个组件。它是我们的一个组件3。OK, 我们组件3呢，给他一个换一个颜色，换一个yellow吧，黄色，OK, 组件三怎么着，在我们组件一的下面，在组件一的下面，是不是我们组件三它的上面。

是组件1对吧，那我们把这个波动呢，就需要切换一下它的top属性，也就是说组件3的上面是我们的组件1。然后组件1的下面对吧，相对于什么？相对于组件1是一个波动对吧流。Mid呢是不变的，都是垂直的啊，都是水平去中的，我们去运行一下。哎，可以发现我们组件3呢，已经实现了，它是在哎，组件1的一个下面。对吧？OK, 这是我们的，呃，实现了两个组件，我们再去实现一个组件，就是我们的锚电组件，对吧？在组件1的左边，我们该如何去实现呢？哎，这里呢。咱们还是去复制一下，节省我们的时间了。组件4。嗯，我们给他一个。

粉红色吧，Pink OK, 好，组件4呢？需要摆放到什么？组件4需要摆放到组件1的左边，那么怎么去摆放组件1的左边呢？那我那么就是不是就意味着我们组件4，它的右边是谁啊，是我们的锚点组件，也就是我们的组件1。也就是说你想要把谁摆放到锚锚点组件的哪边。那么。它这个就是一个相反的对吧，比如说我想把组件4摆放的，呃，摆放的哎，组件1的左边，那么组件4的左边啊，组件4的右边就是我们的组件一。对吧，如果说你要放到它的什么，呃，它的组件1的右边，那么它这个左边就是我们的一个组件一。一定要记住啊，OK, 这是一个水平的rrental，呃，Start.

也就是说组件1的。起始位置对吧，OK, 呃，这个就不能是我们的水平了，这个是应该该该改成我们的一个垂直的center，它是一个呃，Visit.好了，3来我们去运行一下。对吧，我们组件4怎么着，已经在组件1的什么。左边了，OK, 嗯，那么咱们再再实现最后一个组件，对吧，我们在组件1的什么右边再去实现一个组件。9500。我们给他一个。其他的颜色，嗯，这个这个就是为这个。我们给他一个蓝色吧，Blue blue.OK, 那么组建5，再组建一个什么。

右边，那么是不是意味着组件5它的左边是什么？是我们的组件1对吧，我们给他一个left。这个呢，就是相对于组件E。看一下它是一个摁的。OK, 我们再去进行一下。OK对吧，那么这就实现了我们一个组件的一个相对的一个，哎，左上右下的一个摆放了。OK, 那么那么我们这是不是，哎。以此，以此为基础，我们就可以很容易的去实现我们的前沿中的一个DEMO。比如说这个对吧，这个，那么这个我们该如何去实现呢？首先那么中间位置是一个什么是组件3，那么组件1。

那么组件1。怎么样去实现在组件3的什么。左上的位置。左键2呢右上。组建4呢？左下左肩5呢右下，那么针对这个我们该如何去实现呢？哎，这个呢，我简单的去给大家，呃，去去那个。最简单的去实现一下啊，咱们快速的，然后去实现一下，OK, 首先呢，我们现在这个DEMO啊，可以发现我们现在这个DEMO呢，呃，我们只是一个左上右下，并没有实现左上右上啊左下右下这个我们再去实现一个，呃，左键6，呃让这个组件6呢在左上的位置，哎，咱们去看一下。

总加6呢，我们给它一灰色吧。OK, 那么组建6在组建1的什么？左上的。一个位置对吧，我们先去实现实现它的，其他的先去一点点去实现，首先呢，嗯。我们这个组件6是在这个方位对吧，那么首先就是说。他的。他的。下面下面是谁。下面是我们的一个组件4。对吧，那么是不是我们就可以呃，写一个bottom组件4啊，哎，我们去练下。我们给我们的组件4设置一个ID。

OK, 它的是我们的一个，呃。组件4，那么相对于它是一个vertical的顶部位置，对吧。来，我们先去看一下效果。哎。哎，是吧，就是说我们现在已经实现了我们的组件6呢，已经在我们的一个，呃，在我们的一个组件4的一个上面了，那么那么如何和这个组件4进行对齐呢？是不是我们也可以怎么着，相对于我们组件2怎么着，在组件二的左边是吧？我们可以直接给我们的一个组件2再设置一个ID。

点爱你。Will啊？也就是说我们的组件6呢，需要不仅要摆放到组件4的上面，而且还要摆放到组件4的，哎左边对吧。也就是说。组件6的右面是什么？是组件2对吧。我们。然后他是一个好烂。Horizontal.好了啊，来，我们再去看一下。哎，我们可以发现什么我们的组件6已经实现了，哎和组件4和组件二进行水平垂直的一个对齐，那么也就进而言之就实现了什么我们在组件一的什么左上的位置实现了一个组件6，那么我们这种情况呢，是相对于我们知道对吧，我们有组件二对吧，也有我们组件四的一个情况。

对吧，那么现在我有一个问题想问大家，如果说我们当前怎么着没有组件2，没有组件4，就有一个组件1。对吧，就有一个组件1。啊，我们又该如何去实现这个？锚点了，来我们。说哎，我们想要实现对吧，实现。只是相对于我们的一个组件1，然后进行一个位置摆放，那么这种情况下呢，哎，我们就需要去啊知道。第一对吧，知道组件1的一个ID对吧？第二使用alarm ROS, 然后实现我们一个位置摆放。

对吧，那么还有一种情况就是说需要确定我们一个，哎，Relative contain的一个。大小。那这个代码就不给大家去演示了，我们直接前验当中，嗯，有这个相关式代码大家可以看到对吧，首先我们的一个总建议对吧。对吧，组件1就是一个黄色对吧，那么组件2呢，需要在组件1的什么。哎，它的一个左上位置，那么首先就是一个top，就是哎组件2对吧，相对于我们的负容器对吧，是有一个尾top，还有一个red，那么这种情况下需要知道的是我们的一个呃，Relative, 肯定的，它是一个有有的小。就是如果说我们在没有太小的情况下呢，呃，它的属性呢。啊不，那一个安安格属性和一个暗属性的肯定会有。

呃，变化的这个大家需要去注意啊，呃，这个呢，就不给大家去实现了，这个因为相对来说还是非常非常简单的，嗯，OK啊，咱们本次视频呢，主要给大家去讲到这里，主要是讲述了一个什么相对布局的一个，呃，子组件的一个摆放怎么样去呃实现对吧？第一个就是设置ID，第二个就是我们的一个位置，对吧。嗯，其实这里有有给大家去总结一句话啊，其实我们所谓的左上右下反反着来就是对的，就是说比如说锚点在在上面，我已用波动锚点在下面了，我用套在实际开发中呢，哎，可以节约一个开发时间。行，呃，关于那个案例DEMO啊啊，其实大家下去多练一练，这就是试着多练一练，嗯嗯，基本上这个没什么难的，OK, 咱们本次视频就到这里，感谢大家。