Android视角看鸿蒙第十二课-鸿蒙的结构之相对结构RelativeContainer
Android视角看鸿蒙第十二课-鸿蒙的结构之相对结构RelativeContainer导读
相对结构和线性、层叠结构一样都是类似于Android结构的，之前两篇文章已经了解线性、层叠结构的使用方法，这篇文章一起来学习下鸿蒙中的相对结构。
之前的文章中，我偶尔提起过，我不太喜欢使用相对结构。
我思索了下为什么会有这种想法呢？
相对结构写起来太麻烦了
Android中虽然可以使用Xml来设置UI，然而相对linearlayout和FrameLayout，至少要多写2条依靠属性，好比是在哪个组件的右侧，在谁人组件的下方，而Linear大概Frame不用
相对结构阅读成本高
linearlayout和FrameLayout在阅读代码的时候，组件的层级一清二楚，相对结构则必要阅读每个组件的依靠关系
相对结构必要设置每个锚点的ID
Android中相对结构是通过ID来设置依靠关系的，有的组件自己不必要被JAVA代码调用，好比只是个分割线,但由于有组件必要依靠他，则必须设置ID。不敷简便,起ID也费脑子
个人拙见，欢迎探讨。
接下来一起看看鸿蒙中的相对结构吧。
相对结构RelativeContainer
概述
RelativeContainer为采用相对结构的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置结构。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依靠关系。
https://i-blog.csdnimg.cn/blog_migrate/1a7f9e999f0492b26f724ecda7e2447a.png
看起来和Android没什么差别，可以依靠兄弟组件，也可以依靠父结构，同样不可以依靠兄弟的儿子。哈哈
锚点设置
锚点设置是指设置子元素相对于父元素或兄弟元素的位置依靠关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“container”，其余子元素的ID通过id属性设置。
未设置ID的子元素在RelativeContainer中不会表现。
这一段话中的关键点不少，
1、RelativeContainer有默认ID
2、子元素必须设置ID，不设置ID的话不表现
相对结构的代码写法
RelativeContainer父组件为锚点，__container__代表父容器的id。
RelativeContainer() {
Row()
// 添加其他属性
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.id("row1")
Row()
...
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
right: { anchor: '__container__', align: HorizontalAlign.End }
})
.id("row2")
}
...
https://i-blog.csdnimg.cn/blog_migrate/e616422b22fd4ab5a958880928c0c1c9.png
设置相对于锚点的对齐位置
设置了锚点之后，可以通过align设置相对于锚点的对齐位置。
在水平方向上，对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。
https://i-blog.csdnimg.cn/blog_migrate/f04936d215ee07aefd94c8b157ff6fb7.png
在竖直方向上，对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。
https://i-blog.csdnimg.cn/blog_migrate/9361ea16cc4e3affeea3a3063b06117e.png
场景实例
@Entry
@Component
struct Index {
build() {
Row() {
RelativeContainer() {
Row()
.width(100)
.height(100)
.backgroundColor('#FF3333')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },//以父容器为锚点，竖直方向顶头对齐
middle: { anchor: '__container__', align: HorizontalAlign.Center }//以父容器为锚点，水平方向居中对齐
})
.id('row1')//设置锚点为row1
Row() {
Image($r('app.media.icon'))
}
.height(100).width(100)
.alignRules({
top: { anchor: 'row1', align: VerticalAlign.Bottom },//以row1组件为锚点，竖直方向底端对齐
left: { anchor: 'row1', align: HorizontalAlign.Start }//以row1组件为锚点，水平方向开头对齐
})
.id('row2')//设置锚点为row2
Row()
.width(100)
.height(100)
.backgroundColor('#FFCC00')
.alignRules({
top: { anchor: 'row2', align: VerticalAlign.Top }
})
.id('row3')//设置锚点为row3
Row()
.width(100)
.height(100)
.backgroundColor('#FF9966')
.alignRules({
top: { anchor: 'row2', align: VerticalAlign.Top },
left: { anchor: 'row2', align: HorizontalAlign.End },
})
.id('row4')//设置锚点为row4
Row()
.width(100)
.height(100)
.backgroundColor('#FF66FF')
.alignRules({
top: { anchor: 'row2', align: VerticalAlign.Bottom },
middle: { anchor: 'row2', align: HorizontalAlign.Center }
})
.id('row5')//设置锚点为row5
}
.width(300).height(300)
.border({ width: 2, color: '#6699FF' })
}
.height('100%').margin({ left: 30 })
}
}
https://i-blog.csdnimg.cn/blog_migrate/6dd8a2c3b9a217b6034e3121e195d999.png
结语
和Android差不多吧，语法熟悉下就可以了。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]