开源鸿蒙应用项目开发教程（微课版）课件 第6次课 UI自适应布局-相对与网格布局.pptxVIP

《鸿蒙应用安全开发》在线开放课程项目2设计转盘式抽奖程序主讲：本课程团队UI自适应布局-相对与网格布局

目录ContentsUI常用布局-自适应布局一、相对布局二、网络布局三、拓展

一、相对布局相对布局，支持容器内部的子元素设置相对位置关系，支持子元素指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。RelativeContainer：相对布局组件，用于复杂场景中元素对齐的布局。可以设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“__container__”，其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。其接口如下：RelativeContainer()

一、相对布局【例2-5】相对布局，展示子元素复杂布局。实现此布局的思路：指定锚点，基于锚点做相对位置布局。

一、相对布局//Relative.ets@Entry@ComponentstructRelative{build(){Row(){RelativeContainer(){