Openharmony中的Flex和Grid布局
flex 布局
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({ bottom: 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 布局
grid 做前端的同学应该都很熟悉了，翻译成中文为“栅格” ， 它将页面划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 用法如下：
基本概念：网格布局的区域，称为“容器”，容器内部采用网格定位的子元素，称为项目。
项目必须使用 grid 子组件 griditem 子组件包裹，即 grid 的子组件必须是 griditem。
容器属性：
columnstemplate rowstemplate
这两个属性用于设置当前网格布局的行和列的数量，不设置时默认 1 列行或者 1 列。
可以采用 fr 关键字表示各行和列的比例关系, 以列为例：‘1fr 1fr 2fr’ 将父组件等分为 4 等份，第一列第二列各占 1 份，第三列占两份：
核心代码如下：
@state number: 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('1fr 1fr 2fr') .rowstemplate('1fr 1fr 2fr') .backgroundcolor(color.black) .height(300)}
这两个属性里面也可使用 px 单位，如将 columnstemplate 修改：
.columnstemplate('100px 1fr 1fr')
展示效果如下：
columnsgap 和 rowsgap：这两个属性可以设置行列之间的间距，此处不在赘述。
layoutdirection：layoutdirection.row 和 layoutdirection.column，不过尝试过后两种值的结果都是按列排布，默认不给属性的话是按行排布，这里应是没有完全支持。
其他属性：看到文档还提供了很多属性，但目前尝试过后没有效果，未支持。 事件：
onscrollindex(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('1fr 1fr 1fr 1fr 1fr') .columnsgap(10) .rowsgap(10) .onscrollindex((first: number) => { console.log(first.tostring()) }) .backgroundcolor(color.black) .height(300)
总结
grid 布局与 flex 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
flex 布局是轴线布局，只能指定项目针对轴线的位置，可以看作是一维布局。
grid 布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。
其实掌握这两种布局方式，页面上面大部分效果都是可以做出来的。当然，当前 gird 布局还有很多属性是不支持的，相比较与传统的前端 grid 布局功能上有很多不足，期待 api 更新，完善功能。
瞄准工业物联网 高通发布骁龙600E和410E处理器
嵌入式Web服务器可以解决物联网问题吗
Xilinx与生态伙伴启动All Programmable抽象化计划 助力更多设计人员并将生产力提升
基于一种典型的LED应用电路设计
锌-空气电池
Openharmony中的Flex和Grid布局
浅谈激光切割工艺参数如何确定
小电容为什么适用于高频电路？为什么高频旁路电容选择小电容？
续航1000+公里背后的电池“竞赛”
12V输入-5.2/15A输出的双相反向降压/升压电源
一加6T曝光，支持屏下指纹技术电池容量有提升增加了续航能力
人工智能在航空市场的业务洞察力方面表现如何
新媒传信：助运营商全面提升基础电信服务能力
Linux中查看硬件信息超强命令sar
源创通信fxs/fxo Asterisk卡介绍
基于SmCl3框架的SSE的全固态电池在室温下的应用表现
SUB1GHz高集成度无线收发芯片DP4301简介
如何选择适合工业电池的充电器？
CPU一般能使用多久应该如何才能合理的使用及维护CPU
数字资产交易系统怎么盈利 数字资产交易系统开发
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({ bottom: 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 布局
grid 做前端的同学应该都很熟悉了，翻译成中文为“栅格” ， 它将页面划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 用法如下：
基本概念：网格布局的区域，称为“容器”，容器内部采用网格定位的子元素，称为项目。
项目必须使用 grid 子组件 griditem 子组件包裹，即 grid 的子组件必须是 griditem。
容器属性：
columnstemplate rowstemplate
这两个属性用于设置当前网格布局的行和列的数量，不设置时默认 1 列行或者 1 列。
可以采用 fr 关键字表示各行和列的比例关系, 以列为例：‘1fr 1fr 2fr’ 将父组件等分为 4 等份，第一列第二列各占 1 份，第三列占两份：
核心代码如下：
@state number: 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('1fr 1fr 2fr') .rowstemplate('1fr 1fr 2fr') .backgroundcolor(color.black) .height(300)}
这两个属性里面也可使用 px 单位，如将 columnstemplate 修改：
.columnstemplate('100px 1fr 1fr')
展示效果如下：
columnsgap 和 rowsgap：这两个属性可以设置行列之间的间距，此处不在赘述。
layoutdirection：layoutdirection.row 和 layoutdirection.column，不过尝试过后两种值的结果都是按列排布，默认不给属性的话是按行排布，这里应是没有完全支持。
其他属性：看到文档还提供了很多属性，但目前尝试过后没有效果，未支持。 事件：
onscrollindex(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('1fr 1fr 1fr 1fr 1fr') .columnsgap(10) .rowsgap(10) .onscrollindex((first: number) => { console.log(first.tostring()) }) .backgroundcolor(color.black) .height(300)
总结
grid 布局与 flex 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
flex 布局是轴线布局，只能指定项目针对轴线的位置，可以看作是一维布局。
grid 布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。
其实掌握这两种布局方式，页面上面大部分效果都是可以做出来的。当然，当前 gird 布局还有很多属性是不支持的，相比较与传统的前端 grid 布局功能上有很多不足，期待 api 更新，完善功能。
瞄准工业物联网 高通发布骁龙600E和410E处理器
嵌入式Web服务器可以解决物联网问题吗
Xilinx与生态伙伴启动All Programmable抽象化计划 助力更多设计人员并将生产力提升
基于一种典型的LED应用电路设计
锌-空气电池
Openharmony中的Flex和Grid布局
浅谈激光切割工艺参数如何确定
小电容为什么适用于高频电路？为什么高频旁路电容选择小电容？
续航1000+公里背后的电池“竞赛”
12V输入-5.2/15A输出的双相反向降压/升压电源
一加6T曝光，支持屏下指纹技术电池容量有提升增加了续航能力
人工智能在航空市场的业务洞察力方面表现如何
新媒传信：助运营商全面提升基础电信服务能力
Linux中查看硬件信息超强命令sar
源创通信fxs/fxo Asterisk卡介绍
基于SmCl3框架的SSE的全固态电池在室温下的应用表现
SUB1GHz高集成度无线收发芯片DP4301简介
如何选择适合工业电池的充电器？
CPU一般能使用多久应该如何才能合理的使用及维护CPU
数字资产交易系统怎么盈利 数字资产交易系统开发