Android视角看鸿蒙第十二课-鸿蒙的结构之相对结构RelativeContainer ...

Android视角看鸿蒙第十二课-鸿蒙的结构之相对结构RelativeContainer

导读

相对结构和线性、层叠结构一样都是类似于Android结构的，之前两篇文章已经了解线性、层叠结构的使用方法，这篇文章一起来学习下鸿蒙中的相对结构。
之前的文章中，我偶尔提起过，我不太喜欢使用相对结构。
我思索了下为什么会有这种想法呢？
相对结构写起来太麻烦了
Android中虽然可以使用Xml来设置UI，然而相对linearlayout和FrameLayout，至少要多写2条依靠属性，好比是在哪个组件的右侧，在谁人组件的下方，而Linear大概Frame不用
相对结构阅读成本高
linearlayout和FrameLayout在阅读代码的时候，组件的层级一清二楚，相对结构则必要阅读每个组件的依靠关系
相对结构必要设置每个锚点的ID
Android中相对结构是通过ID来设置依靠关系的，有的组件自己不必要被JAVA代码调用，好比只是个分割线,但由于有组件必要依靠他，则必须设置ID。不敷简便,起ID也费脑子
个人拙见，欢迎探讨。
接下来一起看看鸿蒙中的相对结构吧。
相对结构RelativeContainer

概述

RelativeContainer为采用相对结构的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置结构。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依靠关系。

看起来和Android没什么差别，可以依靠兄弟组件，也可以依靠父结构，同样不可以依靠兄弟的儿子。哈哈
锚点设置

锚点设置是指设置子元素相对于父元素或兄弟元素的位置依靠关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“container”，其余子元素的ID通过id属性设置。
未设置ID的子元素在RelativeContainer中不会表现。
这一段话中的关键点不少，
1、RelativeContainer有默认ID
2、子元素必须设置ID，不设置ID的话不表现
相对结构的代码写法

RelativeContainer父组件为锚点，__container__代表父容器的id。

1. RelativeContainer() {
2.   Row()
3.     // 添加其他属性
4.     .alignRules({
5.       top: { anchor: '__container__', align: VerticalAlign.Top },
6.       left: { anchor: '__container__', align: HorizontalAlign.Start }
7.     })
8.     .id("row1")
10.   Row()
11.     ...
12.     .alignRules({
13.       top: { anchor: '__container__', align: VerticalAlign.Top },
14.       right: { anchor: '__container__', align: HorizontalAlign.End }
15.     })
16.     .id("row2")
17. }
18. ...

复制代码

设置相对于锚点的对齐位置

设置了锚点之后，可以通过align设置相对于锚点的对齐位置。
在水平方向上，对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

在竖直方向上，对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。

场景实例

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Row() {
6.       RelativeContainer() {
7.         Row()
8.           .width(100)
9.           .height(100)
10.           .backgroundColor('#FF3333')
11.           .alignRules({
12.             top: { anchor: '__container__', align: VerticalAlign.Top },  //以父容器为锚点，竖直方向顶头对齐
13.             middle: { anchor: '__container__', align: HorizontalAlign.Center }  //以父容器为锚点，水平方向居中对齐
14.           })
15.           .id('row1')  //设置锚点为row1
17.         Row() {
18.           Image($r('app.media.icon'))
19.         }
20.         .height(100).width(100)
21.         .alignRules({
22.           top: { anchor: 'row1', align: VerticalAlign.Bottom },  //以row1组件为锚点，竖直方向底端对齐
23.           left: { anchor: 'row1', align: HorizontalAlign.Start }  //以row1组件为锚点，水平方向开头对齐
24.         })
25.         .id('row2')  //设置锚点为row2
27.         Row()
28.           .width(100)
29.           .height(100)
30.           .backgroundColor('#FFCC00')
31.           .alignRules({
32.             top: { anchor: 'row2', align: VerticalAlign.Top }
33.           })
34.           .id('row3')  //设置锚点为row3
36.         Row()
37.           .width(100)
38.           .height(100)
39.           .backgroundColor('#FF9966')
40.           .alignRules({
41.             top: { anchor: 'row2', align: VerticalAlign.Top },
42.             left: { anchor: 'row2', align: HorizontalAlign.End },
43.           })
44.           .id('row4')  //设置锚点为row4
46.         Row()
47.           .width(100)
48.           .height(100)
49.           .backgroundColor('#FF66FF')
50.           .alignRules({
51.             top: { anchor: 'row2', align: VerticalAlign.Bottom },
52.             middle: { anchor: 'row2', align: HorizontalAlign.Center }
53.           })
54.           .id('row5')  //设置锚点为row5
55.       }
56.       .width(300).height(300)
57.       .border({ width: 2, color: '#6699FF' })
58.     }
59.     .height('100%').margin({ left: 30 })
60.   }
61. }

复制代码

结语

和Android差不多吧，语法熟悉下就可以了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。