第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%')}}三、拓展