第6次课 UI自适应布局-相对与网格布局

《鸿蒙应用安全开发》在线开放课程项目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(){Row().width(100).height(100).backgroundColor('#AA3333').alignRules({//以父容器为锚点竖直方向顶头对齐top:{anchor:'__container__',align:VerticalAlign.Top},//以父容器为锚点水平方向居中对齐middle:{anchor:'__container__',align:HorizontalAlign.Center}}).id('row1')//设置锚点为row1一、相对布局Row().backgroundColor("#FF0000").height(100).width(100).alignRules({//以row1组件为锚点竖直方向底端对齐top:{anchor:'row1',align:VerticalAlign.Bottom},//以row1组件为锚点水平方向开头对齐left:{anchor:'row1',align:HorizontalAlign.Start}}).id('row2')//设置锚点row2Row().width(100).height(100).backgroundColor('#BBCC00').alignRules({top:{anchor:'row2',align:VerticalAlign.Top}}).id('row3')//设置锚点row3一、相对布局Row().width(100).height(100).backgroundColor('#EE9966').alignRules({top:{anchor:'row2',align:VerticalAlign.Top},left:{anchor:'row2',align:HorizontalAlign.End},}).id('row4')//设置锚点row4Row().width(100).height(100).backgroundColor('#EE66FF').alignRules({top:{anchor:'row2',align:VerticalAlign.Bottom},middle:{anchor:'row2',align:HorizontalAlign.Center}}).id('row5')//设置锚点row5}.width(300).height(300).border({width:2,color:'#6699EE'})}.height('100%').margin({left:30})}}二、网格布局网格布局由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要的自适应布局，其使用场景有九宫格图片展示、日历、计算器等。Grid组件为网格容器，其中容器内每一个条目对应一个GridItem组件。网格布局是一种二维布局。Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，同时提供了垂直和水平布局能力。当网格容器组件尺寸发生变化时，所有子组件以及间距会等比例调整，从而实现网格布局的自适应能力。根据Grid的这些布局能力，可以构建出不同样式的网格布局。其接口如下：Grid(scroller?:Scroller)二、网格布局【例2-6】网格布局，展示页面均分能力以及子组件占比控制能力。实现此布局的思路：使用Grid设置网格布局相关参数，使用GridItem定义子组件相关特征，进而构建网格布局。二、网格布局//GridExam.ets@Entry@ComponentstructGridExam{@Stateitems:Array<string>=['智慧办公','智能家居','影音娱乐','运动健康','热卖榜','直播间','以旧换新','配件中心','甄选推荐','她之选']build(){Column(){Grid(){ForEach(this.items,(item:string)=>{GridItem(){Text(item).fontSize(40).fontWeight(FontWeight.Bolder).border({width:1}).backgroundColor(0xBBCC00).width('100%').height('100%').textAlign(TextAlign.Center)}},(item:string)=>item)}

二、网格布局.rowsTemplate('1fr1fr1fr1fr').columnsTemplate('1fr1fr1fr').columnsGap(10).rowsGap(10).width('100%').backgroundCo