对于鸿蒙app开发中布局及其属性的笔记

对于布局其实在鸿蒙设备开发的文档中倒是提到了不少的布局，这里可以首先介绍一下不一定是适用于什么语言开发的，但是是适用于全部的一些布局内容。比如自适应布局，这个就很人性化，可以进行自适应拉伸、自适应缩放、自适应延伸，什么的，比较方便。

还有响应式布局可以分为分栏布局、重复布局、挪移布局、缩进布局。

分栏布局

利用屏幕的宽度优势，将有上下级层级的界面同时左右显示。

重复布局

利用屏幕的宽度优势，将相同属性的组件横向并列排布。

挪移布局

利用屏幕的宽度优势，将原先的上下布局切换成左右布局。

缩进布局

为了在宽屏上内容显示有更好的效果，在不同宽度的设备上进行不同缩进效果。

上述的布局出了挪移布局，其他均有一个属性：当栅格为8column或12column时可以响应重复布局。

下面js开发布局中的弹性布局和栅格布局、

弹性布局主要需要确定的是主轴和交叉轴的方向，主轴的方向可以进行direction参数来进行设置，介绍的函数有FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection.Row相反的方向开始排布。等等，总体来说，HarmonyOs开发确实也为我们提供了不少的函数减轻我们的开发压力什么的，对于后面界面内容开发的话，我到是建议记住一些高频用到的函数，比如text-align、font-size、z-index，什么的。

下面讲一下弹性布局的换行什么的：

FlexWrap.NoWrap: 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。

FlexWrap.Wrap：换行。

FlexWrap.WrapReverse：换行，且与行排列方向相反。

弹性布局正如它的名字一样，可以进行身长和压缩，一般不声明的话都是弹性的内容。

下一步便是弹性布局对齐方式，鉴于篇幅问题，这里只是大致介绍一下，由主轴对齐和交叉轴对齐以及内容对齐，每一个都有很多的函数方便进行开发什么的。

下一个讲的是栅格布局：

这里借鉴一下开发文档中的一点内容，

我对于栅格布局的看法就是可以很好的利用页面的每一处地方，进行组合，可以将页面分为很多的行和列，在对这些行和列进行选用和组合，那么就会有很多出乎意料的效果.

这里在借用一下文档的内容：使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。