更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com一次终端部署，我理解是设计一个弹性的UI框架。容器组件Flex从API版本7开始支持，是一个弹性布局组件。这一次，我们将对Flex的不同参数做一个简单的演示。一起来学习吧(??_?)?概述Flex有五种类型的参数，本文先说说direction和wrap的作用如下：Text1.在左上角新建一个空工程File->New->NewProject->EmptyAbility，语言选择ets2，新建ets页面。本例写3.example1和example2上的FlexDirectionDemoRow为行方向，Column为列方向；在行方向，设置四个文本组件，每个组件的宽度为容器Flex宽度的20%，会预留20%的宽度空间，从渲染图可以看出Row是从左到右，RowReverse是从右到左；而Column是从上到下，ColumnReverse是从下到上。代码如下：//Example01@Entry@ComponentstructFlexExample1{build(){Column({space:5}){DirectionRowFlex({text:'direction:Row',direction:FlexDirection.Row})DirectionRowFlex({text:'direction:RowReverse',direction:FlexDirection.RowReverse})DirectionColumnFlex({text:'direction:Column',direction:FlexDirection.Column})DirectionColumnFlex({text:'direction:ColumnReverse',direction:FlexDirection.ColumnReverse})}.width('100%')}}@ComponentstructDirectionRowFlex{privatetext:stringprivatedirection:FlexDirectionbuild(){Column({space:5}){Text(this.text).fontSize(15).width('90%')Flex({direction:this.direction}){Text('1').fontSize(30).width('20%').height(50).backgroundColor(0xF5DEB3)Text('2').fontSize(30).width('20%').height(50).backgroundColor(0xD2B48C)Text('3').fontSize(30).width('20%').height(50).backgroundColor(0xF5DEB3)Text('4').fontSize(30).width('20%').height(50).backgroundColor(0xD2B48C)}.height(70).width('90%').padding(10).backgroundColor(0xAFEEEE)}.width('100%').margin({top:5})}}@ComponentstructDirectionColumnFlex{私有文本：stringprivatedirection:FlexDirectionbuild(){Column({space:5}){Text(this.text).fontSize(15).width('90%')Flex({direction:this.direction}){Text('1').fontSize(18).width('100%').height(40).backgroundColor(0xF5DEB3)Text('2').fontSize(18).width('100%').height(40).backgroundColor(0xD2B48C)文本('3').fontSize(18).width('100%').height(40).backgroundColor(0xF5DEB3)文本('4').fontSize(18).width('100%').height(40).backgroundColor(0xD2B48C)}.height(160).width('90%').padding(10).backgroundColor(0xAFEEEE)}.width('100%').margin({top:5})}}4.FlexWrapDemo中定义的Text组件Wrap和NoWrap下的布局效果是不一样的。在允许多行排列的Wrap中（方向默认为Row），单个Text组件的宽度为set，为容器组件宽度的50%；而NoWrap单行排列，三个50%会超过100%，所以显示的排列是三个的比例，即50%/50%+50%+50%WrapReverse是Wrap的反面，即多行/多列排列，方向为从右到左/从下到上。代码如下：//Example02@Entry@ComponentstructFlexExample2{build(){Column({space:5}){WrapFlex({text:'wrap:Wrap',wrap:FlexWrap.Wrap})WrapFlex({text:'wrap:NoWrap',wrap:FlexWrap.NoWrap})Text('wrap:WrapReverse,direction:Row').fontSize(15).width('90%')Flex({wrap:FlexWrap.WrapReverse,direction:FlexDirection.Row}){Text('1').fontSize(20).width('50%').height(50).backgroundColor(0xF5DEB3)Text('2').fontSize(20).width('50%').height(50).backgroundColor(0xFFBC79)Text('3').fontSize(20).width('50%').height(50).backgroundColor(0xD2B48C)}.height(120).width('90%').padding(10).backgroundColor(0xAFEEEE)}.width('100%')}}@ComponentstructWrapFlex{privatetext:stringprivatewrap:FlexWrapbuild(){Column({space:5}){Text(this.text).fontSize(15).width('90%')Flex({wrap:this.wrap}){Text('1').fontSize(20).width('50%').height(50).backgroundColor(0xF5DEB3)Text('2').fontSize(20).width('50%').height(50).backgroundColor(0xFFBC79)Text('3').fontSize(20).width('50%').height(50).backgroundColor(0xD2B48C)}.width('90%').padding(10).backgroundColor(0xAFEEEE)}.width('100%').margin({top:5})}}结论以上就是我这次的小分享啦??！！2022，在学习的路上继续前行！更多信息请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com
