HarmonyOS应用开发学习笔记 UI布局学习相对布局（RelativeContainer）

最新推荐文章于 2025-05-29 11:38:10 发布

木子102

最新推荐文章于 2025-05-29 11:38:10 发布

阅读量1.7k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：鸿蒙HarmonOS 文章标签： harmonyos 学习笔记

本文链接：https://blog.csdn.net/qq_38355313/article/details/135494815

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为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为