鸿蒙应用开发项目教程 课件 第5次课 UI自适应布局-其它布局

《鸿蒙应用开发基础》在线开放课程项目2设计转盘式抽奖程序主讲：本课程团队UI自适应布局-其它布局目录ContentsUI常用布局-自适应布局一、层叠布局二、弹性布局五、拓展三、层叠布局四、弹性布局一、层叠布局层叠布局用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。Stack，堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。其接口如下：Stack(value?:{alignContent?:Alignment})一、层叠布局【例2-3】Stack层叠布局，展示子元素位置的固定定位与层叠。实现此布局的思路：设置子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加。//StackExam.ets@Entry@ComponentstructStackExam{build(){Stack({alignContent:Alignment.Center}){Text('子组件1，显示在底部').width('90%').height('100%').textAlign(TextAlign.Center).fontColor(0xffffff).backgroundColor(0x660000).align(Alignment.Top)Text('子组件2，显示在中间').width('70%').height('70%').textAlign(TextAlign.Center).fontColor(0xffffff).backgroundColor(0x990000).align(Alignment.Top)Text('子组件3，显示在顶部').width('50%').height('40%').textAlign(TextAlign.Center).fontColor(0xffffff).backgroundColor(0xFF0000).align(Alignment.Top)}.width('100%').height('100%').margin({top:5})}}二、弹性布局弹性布局提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。Flex，以弹性方式布局子组件的容器组件，其接口如下：Flex(value?:{direction?:FlexDirection,wrap?:FlexWrap,justifyContent?:FlexAlign,alignItems?:ItemAlign,alignContent?:FlexAlign})二、弹性布局【例2-4】Flex弹性布局，展示子元素水平方向上的排列。实现此布局的思路：设置子元素子沿水平方向排列，两端对齐，子组件间距平分，竖直方向上子组件居中。二、弹性布局//FlexExam.ets@Entry@ComponentstructFlexExam{build(){Column(){Column({space:5}){Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){Text('子组件1').width('30%').height('90%').backgroundColor(0x660000).textAlign(TextAlign.Center).fontColor(0xffffff)Text('子组件2').width('30%').height('90%').backgroundColor(0xFF0000).textAlign(TextAlign.Center).fontColor(0xffffff)Text('子组件3').width('30%').height('90%').backgroundColor(0x990000).textAlign(TextAlign.Center).fontColor(0xffffff)}.height('95%').width('90%').backgroundColor(0xFFCCCC)}.width('100%').margin({top:5})}.width('100%')}}三、相对布局相对布局，支持容器内部的子元素设置相对位置关系，支持子元素指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。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').col