了解更多开源请访问：开源基础软件社区https://ost.51cto.com1.环境开发板：DAYU200系统版本：OpenHarmony3.2.2.3SDK版本：ohos-sdk3.2.2.3开发工具：DevEcoStudio3.0.0.900(ForOpenHarmony)II.知识点及示例图3.知识点简述1.堆叠容器（Stack）stacking容器就是将子组件堆叠在一起，并以后进先出的方式显示在UI中。可以理解为把东西放在盒子里，盒子里的最后一个在最上面一层。使用场景如首页倒计时跳转、页面悬浮按钮等。简单示例(stackSimple.ets)@Entry@ComponentstructStackSimple{build(){Flex({direction:FlexDirection.Column}){//Stack(value:{alignContent?:Alignment})//alignContent:Alignment默认center设置子组件在容器中的对齐方式，可以默认//设置子组件在容器中的对齐方式为默认，即居中对齐Stack(){Text('第一个子组件').width('100%').height(300).fontSize(50).fontColor(Color.White).backgroundColor(Color.Grey)Text('第二个子组件').width('50%').height(100).fontSize(50).fontColor(Color.White).backgroundColor(Color.Blue)}.layoutWeight(1).border({width:2,style:BorderStyle.Solid,color:Color.Red})//设置sub的对齐方式容器中组件的顶部对齐Stack({alignContent:Alignment.Top}){Text('第一个子组件').width('100%').height(300).fontSize(50)。fontColor(Color.White).backgroundColor(Color.Grey)Text('第二个子组件').width('100%').height(100).fontSize(50).fontColor(Color.White).backgroundColor(Color.Blue)}.layoutWeight(1).border({width:2,style:BorderStyle.Solid,color:Color.Green})//设置子组件在容器中的对齐方式为底部对齐Stack({alignContent:Alignment.Bottom}){Text('第一个子组件').width('100%').height(300).fontSize(50).fontColor(Color.White).backgroundColor(Color.Gray)Text('第二个子组件').width('100%').height(100).fontSize(50).fontColor(Color.White).backgroundColor(Color.Blue)}.layoutWeight(1)。border({width:2,style:BorderStyle.Solid,color:Color.Orange})}.width('100%').height('100%').padding(14)}}详见：Stack堆栈容器组件2.灵活布局容器（Flex）灵活布局容器也可以称为灵活的盒子，它提供了两个轴，即主轴和交叉轴。主轴的方向由direction属性设置，十字轴始终垂直于主轴。使用场景比较多，比如列表展示，布局划分等。简单示例(flexSimple.ets)@Entry@ComponentstructFlexSimple{build(){//Flex(options?:{direction?:FlexDirection,wrap?:FlexWrap,justifyContent?:FlexAlign,alignItems?:ItemAlign,alignContent?:FlexAlign})//direction：子组件在Flex容器上的排列方向，即主轴方向。DefaultFlexDirection.RowFlex({direction:FlexDirection.Column}){//不设置主轴方向，默认为RowFlex(){Text('第一个子组件').fontSize(25).fontColor(Color.White).backgroundColor(Color.Grey).layoutWeight(1).height('100%')Text('第二个子组件').fontSize(25).fontColor(Color.White).backgroundColor(Color.Green).layoutWeight(1).height('100%')Text('第三子组件').fontSize(25).fontColor(Color.White).backgroundColor(Color.Gray).layoutWeight(1).height('100%')}.width('100%').layoutWeight(1)//设置主轴方向为ColumnFlex({direction:FlexDirection.Column}){Text('第一个子组件').fontSize(25).fontColor(Color.White).backgroundColor(Color.Grey).layoutWeight(1).width('100%')Text('第二个子组件').fontSize(25).fontColor(Color.White).backgroundColor（颜色.绿色）.layoutWeight(1).width('100%')Text('第三子组件').fontSize(25).fontColor(Color.White).backgroundColor(Color.Gray).layoutWeight(1).width('100%')}.height('100%').layoutWeight(3).border({width:2,style:BorderStyle.Solid,color:Color.White})}.width('100%').height('100%').padding(14).backgroundColor(Color.Orange)}}layoutWeight确定容器大小时，元素和兄弟节点的主轴布局大小为根据权重分配，忽略大小设置只在Row/Column/FlexLayout生效。详情请参考：Flex弹性布局组件。3.路径绘制组件（Path）路径绘制组件是将固定区域内的起点、经过点、终点用线连接起来形成一个图形。就像你早上跑步，从你家门口开始，绕着小区跑一圈，经过的路线形成一个不规则的圆圈。使用场景绘制图标图形。简单示例（pathSimple.ets）@Entry@ComponentstructPathSimple{build(){//Path()//width路径所在矩形的宽度height路径所在矩形的高度commandscommandstringfordrawingthepath//commands('M起始坐标L画一条直线到坐标H画一条垂直线到坐标V画一条水平线到坐标C三次钟形曲线到S平滑三次钟形曲线到Q二次钟形曲线到T平滑二次钟形曲线到A椭圆弧ZClose')Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,alignContent:FlexAlign.Center}){//画一条直线Path().width(300).height(10).commands('M00L5000Z').stroke(Color.Blue).strokeWidth(3)//画一个矩形Path().width(300).height(100).commands('M00H500V100H0Z').fill(Color.White).stroke(Color.Red).strokeWidth(3)//画一个圆Path().width(300).height(300).commands('M150150a10010001101Z')}.width('100%').height('100%')}}要实现类似SVG的效果，需要知道Shape绘制组件的父组件。详见：Path路径绘制组件。4.垂直方向布局容器（Column）容器在垂直方向布局，即通过设置属性使其子组件在垂直方向显示。内容列表、聊天列表等使用场景。简单示例（columnSimple.ets）@Entry@ComponentstructColumnSimple{build(){//Column(value:{space?:Length})//space垂直布局元素间距Column({space:10}){Text('1').fontSize(50).fontColor(Color.White).backgroundColor(Color.Blue).width('100%').textAlign(TextAlign.Center)Text('2').fontSize(50).fontColor(Color.White).backgroundColor(Color.Orange).width('100%').textAlign(TextAlign.Center)Text('3').fontSize(50).fontColor(Color.White).backgroundColor(颜色.Green).width('100%').textAlign(TextAlign.Center)}.width('100%').height('100%').padding({top:20})}}查看详情：Column垂直布局容器。5.文本组件（Text）文本组件是App中最常用来呈现信息的组件。常见场景包括用户昵称、内容列表中的文本信息、文章内容信息等。简单示例(textSimple.ets)@Entry@ComponentstructTextSimple{build(){Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){//Text(content?:string)//contenttextcontentText('WelcometoOpenHarmony!').fontSize(50).fontColor(Color.Red).fontWeight(FontWeight.Bold)}.width('100%').height('100%')}}详细请参考：Text文本组件。6.路由（Router）路由是页面间跳转的常用API。页面中需要引入路由模块importrouterfrom'@ohos.router'，router.push常用于应用内跳转到指定页面。简单示例(routerSimple.ets)importrouterfrom'@ohos.router';@Entry@ComponentstructRouterSimple{build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Button('跳转到主页').width(300).height(50).fontSize(25).onClick(()=>{router.push({url:'pages/index'})})}.width('100%').height('100%')}}注意：跳转页面必须是在js中配置的页面->config.json的pages。详见：路由器。7.定时器(setInterval)setInterval重复调用一个函数，每次调用之间有固定的时间延迟。使用场景3秒后跳转到页面。简单示例(intervalSimple.ets)importrouterfrom'@ohos.router';@Entry@ComponentstructIntervalSimple{@Statetime:number=3;build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Text(`Skip|${this.time}s`).fontSize(50).fontColor(Color.White).backgroundColor(Color.Gray).padding(10).width(300).height(120).textAlign(TextAlign.Center).borderRadius(50)}.width('100%').height('100%')}aboutToAppear(){letskipWait=setInterval(()=>{this.time--;if(this.time===0){clearInterval(skipWait);router.push({url:'pages/index'})}},1000)}}详见：setInterval定时器。4.启动页的实现使用总结三介绍的容器、组件和API完成启动页。根据第二个总结，启动页由Logo、文字、跳过倒计时组成。核心代码如下：importrouterfrom'@ohos.router';@Entry@ComponentstructSplash{@StatetimeMeter:number=3;私人skipWaite；build(){Stack({alignContent:Alignment.TopEnd}){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Flex({alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Shape(){Path().commands('M7020a50500000100Z')Path().commands('M7020L30020L300140L100140L100105a1515000-15-15a1515000-1515Z')Path().commands('M30020a50500010120Z')Path().commands('M100120L100280L250280L250170L220170a1515001-15-15a151500115-15Z')Path().commands('M100280a50500001500Z')}.height('400px').宽度（'400px'）.填充（0x8B8ED7）}.layoutWeight(2).width('100%')Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Text('叮音').fontSize(50).fontWeight(FontWeight.Bold).fontColor(Color.White)Text('与乐符共舞，共普完成美篇章').fontSize(16).fontColor(0xE5E5E5)}.layoutWeight(1).width('100%')}.height('100%').width('100%')Text(`跳过|${this.timeMeter}s`).height(32).fontSize(14).fontColor(Color.White).borderRadius(50).backgroundColor(0xB2B2B236).margin({top:20,right:20}).padding({top:8,bottom:8,left:16,right:16}).onClick(()=>{clearInterval(this.skipWaite);})}.width('100%').height('100%').linearGradient({方向:GradientDirection.LeftTop,颜色:[[0xA0EACF,0],[0x014872,1]]})}aboutToAppear(){this.skipWait=setInterval(()=>{this.timeMeter--;if(this.timeMeter===0){clearInterval(skipWait);router.push({url:'pages/index'})}},1000)}}看演示效果：OpenHarmonyApp启动页和欢迎页想知道更多开源信息请访问：开源基础软件社区https://ost.51cto.com
