HarmonyOS应用开发学习笔记 UI布局学习 相对布局 (RelativeContainer)
2024-01-10 13:53:35
UI布局学习 之 相对布局 (RelativeContainer)
一、关键字 RelativeContainer, alignRules(适配规则)
Text('Text02')
.alignRules({
left: { anchor: 'text01', align: HorizontalAlign.Start },
top: { anchor: 'text01', align: VerticalAlign.Bottom },
bottom: { anchor: 'text01', align: VerticalAlign.Bottom },
right: { anchor: 'text01', align: HorizontalAlign.End }
})
- 其实很好理解 :alignRules{}里面表示:
- 元素四个方向(left,top,bottom,right),
- 相对于谁(anchor:‘id’)
- 的什么位置(HorizontalAlign.Start ,VerticalAlign.Bottom ,VerticalAlign.Bottom, HorizontalAlign.End )
RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。下图是一个RelativeContainer的概念图,图中的虚线表示位置的依赖关系。
子元素并不完全是上图中的依赖关系。比如,Item4可以以Item2为依赖锚点,也可以以RelativeContainer父容器为依赖锚点。
二、关键:锚点(相对于谁)、对齐方式
项目 | 描述 |
---|---|
锚点 | 相对于谁,通过锚点设置当前元素基于哪个元素确定位置。 |
对齐方式 | 通过对齐方式,设置当前元素是基于锚点的上中下对齐,还是基于锚点的左中右对齐。 |
RelativeContainer ID | RelativeContainer父组件为锚点,__container__代表父容器的id |
.alignRules | 设置对齐方式的关键方法(left、middle、right,top、center、bottom) |
为了明确定义锚点,必须为RelativeContainer及其子元素设置ID
- 在水平方向上,可以设置left、middle、right的锚点。
- 竖直方向上,可以设置top、center、bottom的锚点。
RelativeContainer父组件为锚点,__container__代表父容器的id
关键点:
- 1、弄清楚相对于谁,(id是关键)
- 2、对齐方式的设置(eft、middle、right,top、center、bottom)
1、元素相对于父组件 示例:
RelativeContainer() {
Text('Text01')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
}).width(100).height(100).backgroundColor(Color.Red)
.id('text01')
Text('Text02')
.textAlign(TextAlign.Center)
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
right: { anchor: '__container__', align: HorizontalAlign.End }
}).width(100).height(100).backgroundColor(Color.Green)
.id('text02')
}.backgroundColor(Color.Yellow).width('100%').height(500)
2、子元素之间相对布局 以子元素为参照物
- text02相对于text01
RelativeContainer() {
Text('Text01')
.alignRules({
//相对于父容器,顶部(top)和左边(start)位置
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.width(100)
.height(100)
.backgroundColor(Color.Red)
.id('text01')
Text('Text02')
.textAlign(TextAlign.Center)
.alignRules({
//相对于text01(id为('text01')的元素),顶部(top)和id('text01')的底部(Bottom)对齐
top: { anchor: 'text01', align: VerticalAlign.Bottom },
left: { anchor: 'text01', align: HorizontalAlign.Start } //顶部(top)和id('text01')的底部(Bottom)对齐
})
.margin({ top: 20 })
.width(100)
.height(100)
.backgroundColor(Color.Green)
.id('text02')
}.backgroundColor(Color.Yellow).width('100%').height(500)
三、设置相对于锚点的对齐位置
项目 | 描述 |
---|---|
水平方向 | 可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。 |
竖直方向 | 可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。 |
文章来源:https://blog.csdn.net/qq_38355313/article/details/135494815
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!