更多信息请访问：??????????????????????????????????????????????????概述Flex布局是非常常见且方便的布局模式。这种布局模式在前端和小程序开发中得到了广泛的应用。如果你之前学习过Flex布局，那么在Openharmony中也是类似的。使用容器常用参数：direction：子组件在Flex容器上的排列方向，即主轴方向。wrap：flex容器是单行/列排列还是多行/列排列。justifyContent：子组件在flex容器主轴上的对齐格式。alignItems：子组件在flex容器横轴上的对齐格式。alignContent：当横轴有多余空间时，多行内容的对齐方式。仅当wrap为Wrap或WrapReverse时生效。子组件的公共属性（不是所有属性）flexGrow：Flex容器剩余空间分配给该属性所在组件的比例。简单使用Flex布局的属性有很多，但最常用的是使子组件垂直和水平居中。有两个属性可以保证子组件的垂直和水平居中：Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Text('水平垂直居中显示').fontSize(18)}.width('100%').height('100%')flex也可以用在很多常见的布局场景中，如下图所示：使用direction属性和flexGrow配合可以轻松实现以上布局效果。核心代码段如下：Flex({direction:FlexDirection.Column}){Column(){ForEach(this.ListData,(item)=>{Text(item).fontSize(18).height(100).width('100%').margin({bottom:5}).backgroundColor('#575da8')},item=>item)}.flexGrow(1).backgroundColor('#08ec89').margin({底部:2}).padding(10)Flex({alignItems:ItemAlign.Center}){ForEach(this.navData,(item)=>{Text(item).fontSize(18).height('100%').flexGrow(1).textAlign(TextAlign.Center).backgroundColor("#18ec08").margin(1)},item=>item)}.height(64)}.width('100%').height('}100%')flex还有一个常用的属性wrap，可以用来配置换行。但是如果是多行，建议使用Grid布局，更加灵活。让我们来看看网格布局。Grid布局概述Grid作为前端同学应该不陌生，翻译成中文就是“网格”，它将页面划分成网格，不同的网格可以任意组合，做出各种布局。基本使用概念：网格布局的区域称为“容器”，容器内部由网格定位的子元素称为“项”。item必须用Grid子组件包裹，即GridItem子组件，即Grid的子组件必须是GridItem。容器属性：columnsTemplate和rowsTemplate：这两个属性用于设置当前网格布局的行数和列数。如果未设置，则默认为1行或1列。您可以使用fr关键字来表示每行和每列之间的比例关系。以列为例：'1fr1fr2fr'将父组件分成4等份，第一列和第二列各占1份，第三列占2份：核心代码如下：@StateNumber:String[]=['0','1','2']build(){Grid(){ForEach(this.Number,(item:string)=>{ForEach(this.Number,(item:string)=>{GridItem(){Text(item).fontSize(16).backgroundColor(Color.Grey).width('100%').height('100%').textAlign(TextAlign.Center)}.borderWidth(1)},item=>item)},item=>item)}.columnsTemplate('1fr1fr2fr').rowsTemplate('1fr1fr2fr').backgroundColor(Color.Black).height(300)}这两个属性也可以使用px单位，比如修改columnsTemplate：.columnsTemplate('100px1fr1fr')显示效果如下：columnsGap和rowsGap：这两个属性可以设置行与列之间的间距此处不再赘述。layoutDirection：LayoutDirection.Row和LayoutDirection.Column，但是这两个值尝试后的结果是按列排列的。如果该属性默认没有给出，则按行排列。其他属性应该没有完全支持：看文档也提供了很多属性都加了，但是目前试了没有效果，不支持。EventonScrollIndex(first:number)=>void当当前列表显示的起始位置改变时会触发该事件。如果要显示效果，需要做布局滚动条，可以去掉rowsTemplate属性，然后在子组件内部设置高度。然后添加事件监听器：Grid(){ForEach(this.Number,(item:string)=>{ForEach(this.Number,(item:string)=>{GridItem(){Text(item).fontSize(16).backgroundColor(Color.Grey).width('100%').height(80).textAlign(TextAlign.Center)}},item=>item)},item=>item)}.columnsTemplate('1fr1fr1fr1fr1fr').columnsGap(10).rowsGap(10).onScrollIndex((first:number)=>{console.log(first.toString())}).backgroundColor(Color.Black).height(300)To综上所述，Grid布局与Flex有一定的相似之处，都是可以指定多个item在容器内的位置。但是，它们也有重大差异。flex布局是轴布局，只能指定“item”相对于轴的位置，可视为一维布局。Grid布局将容器分为“行”和“列”，生成单元格，然后指定“项所在的单元格”，可以看成是二维布局。其实掌握了这两种布局方式，页面上的大部分效果都可以做出来。当然，还有很多属性是目前的Grid布局不支持的。与传统的前端网格布局相比，存在很多不足。我们期待API的更新和改进的功能。更多资讯请浏览：?????????????????????????????????????????????????????????
