鸿蒙的四大布局

导读

前面八篇文章描述了鸿蒙app的配置文件，关于版本号，开发版本，桌面图标等等配置方式。从这一篇文章开始学习鸿蒙的UI使用方式。

前面我们学习到鸿蒙有ability和page的区分，ability类似Activity但又不完全一样（比如ability每一个都是独立的运行中菜单图标和名称，一样的是都有生命周期），page类似于xml也不完全一样（比如page中既有view的定义也有事件的定义）。
但是可以也看的出来page是负责UI组件描述的。

官方文档

文档地址
可以看的出来，鸿蒙和Android的UI分类基本类似，都是由布局（viewgroup）、组件（text,ibtn）、页面路由（intent,tab）、图形(img)、动画（anim）、交互事件(onTouch)等构成的，但是又多出来一个ArkTs,这个是鸿蒙的开发语言，但他放在了UI开发概述中，还是第一个，也许这个会是我们学习的重点，但是先不管他，还是从我们熟悉的五大布局开始。

鸿蒙的八大布局

相信有很多同学应该都对Android的五大布局滚瓜烂熟，没有办法早期面试必问，初学的同学可能还会磕磕绊绊的，想来想去都想不出来最不常用的AbsoluteLayout绝对布局。
现在好了华为有8大布局，哈哈哈哈!
其实鸿蒙的八大布局和Android的五大布局的概念是不一样的，具体分析后可以分为三类

线性布局（Row、Column）、层叠布局（Stack）、相对布局（RelativeContainer）

这三个是和Android无法布局一个概念,等同于LinearLayout、FrameLayout、RelativeLayout。
虽然Android有五大布局但最常用的也就是这三个，
AbsoluteLayout绝对布局因为兼容问题基本没有使用场景,
TableLayout表格布局则太局限了,性能上也无法和GridLayout(recyclerView的GridLayout)相提并论。

弹性布局（Flex）

弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局，可使得多个容器内子组件能有更好的视觉上的填充容器效果。

类似于线性布局（Row、Column）（linearLayout）拥有更好的拉伸视觉效果,可以理解为线性布局加强版

列表（List）、网格（Grid）

等同于Android 中的ListView、GridView,Android把这两个划分在了列表控件,鸿蒙则依然描述为布局。

栅格布局（GridRow、GridCol）

文档描述：
栅格是多设备场景下通用的辅助定位工具，通过将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分，它可以实现不同设备下不同的布局，空间划分更随心所欲，从而显著降低适配不同屏幕尺寸的设计及开发成本，使得整体设计和开发流程更有秩序和节奏感，同时也保证多设备上应用显示的协调性和一致性，提升用户体验。推荐手机、大屏、平板等不同设备，内容相同但布局不同时使用。

这个一定要和Grid区分开，虽然他也是Grid开头的，但他是为了保证屏幕比例差别越来越大的情况下时的UI体验，妥妥时代的巨轮。

说一下我自己的理解吧，在华为的元服务中把手机页面分为横排4个正方形格子,可以看下面的图

其他设备也是这样划分的，PC、TV等，是华为为了更好的屏幕兼容所推出的概念

媒体查询（@ohos.mediaquery）

文档描述
媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局，以及屏幕发生动态改变时更新应用的页面布局

这个相对来说更为特殊,其他布局都是大写字母开始的，这个是由@开始。
根据文档描述，依然主要用于屏幕比例发生改变时。

轮播（Swiper）

等同于Viewpager。

结语

虽然华为有八大布局，但是可以分为
(线性布局、层叠布局、相对布局)等类Android布局；
弹性布局为线性布局加强版；
(列表（List）、网格（Grid）)等列表布局；
轮播（Swiper）类Viewpager布局；
上面这些在Android中都存在，仅换了个描述
（栅格布局（GridRow、GridCol）、媒体查询（@ohos.mediaquery））等跨设备兼容布局
这两个属于新增的,都是为了跨设备的UI兼容

android常用的布局基本都是存在的，我能想到的是缺少了瀑布流，也许因为用的少官方不直接提供了吧,也许划分在了其他的描述里，后面再关注。

下篇文章开始依次了解每个布局的具体用法。