最近这两天看了关于H5游戏开发的一个教程，实践很短暂，看了很多理论的东西，现在呢也只是想回忆回忆关于EUI的部分知识吧

Posted 2020-08-11

首先我了解了什么是Egret：

Egret中文就是白鹭的意思，Egret是一套H5游戏开发的软件。（纯粹属于个人理解）

其次我对以下几款软件的相关知识做了些了解：

Egret Engine（引擎），Egret Wing（编辑器），Texture Merger（可将零散纹理拼合为整图，同时也可以解析SWF、GIF动画，导出可供Egret使用的配置文件），Egret Feather（是一款粒子效果编辑器）ResDepot（是针对资源配置文件的创建，编辑和管理工具）等.......ps:现在我只看了这些吧还有很多相关软件

接下来我看了关于游戏的UI知识：

前期游戏UI是用的GUI，更新后更多的是在使用EUI。GUI过渡到EUI后改变了那些呢？新增加了什么呢？我带着这个疑问继续了解了下去。EUI和GUI相比，组件后立即返回宽高；现在的EUI只有addchild()系列方法，已经不存在addElement()方法，任意UI组件和普通显示对象都可以互相混合添加；GUI库里必须将皮肤声明为一个独立的EXML文件在引用皮肤，（如果皮肤需要反复使用建议使用这种方式），EUI里已经支持EXML的内部类定义方法，可以直接嵌入写在节点内；EUI运行时将EXML文件改为运行时解析，不在提前编译（GUI库里EXML文件是在命令行编译阶段编译成js文件）；EUI库里EXML可以描述非皮肤对象；EUI支持动态数据绑定；EUI支持自动布局兼容旋转缩放；EUI库还可以主题匹配。

然后我了解了EUI的基础知识：

一个页面首先我先下手的就是它的UI布局，EUI的布局分为5种：

1、基本布局，指的就是默认的布局样式。在基本布局模式下，容器内的子项的定位方式取决于每一个子项的坐标设置；

2、水平布局，也就是横向布局。这种布局他会自动将所有的子项横着排序，然后你可以设置子项之间的间距（gap属性），horizontalAlign（水平对齐方式），verticalAlign（垂直对齐方式），padding系列属性，设置容器的内边距；

3、垂直布局，就是竖向的排列方式。有水平布局一样的属性；

4、网格布局，即做横向布局也做纵向布局，实现的效果就像格子一样，它除了可以设置padding属性以外，还可以设置horizontalGap（设置子项之间的水平距离），verticalGap（子项之间的垂直距离），coumnAlign（如何将完全可见列与容器宽度对齐），rowAlign（如何将完全可见列与容器高度对齐）

注意：columnAlign和rowAlign设置对于边界对齐有很重要的作用

5、自定义布局，顾名思义就是按照你想做的样子进行布局。自动布局可以完成调配屏幕的适配问题{完成屏幕适配可以分为两个步骤：1、舞台尺寸和设备屏幕的适配关系。2、内部UI界面与舞台尺寸的适配关系}自动布局也可以解决异步问题和失效验证机制。

以上布局最常用的用应该算是水平布局和垂直布局了，其中水平布局、垂直布局、网格布局，都会忽略子项上的坐标位置，所有子项的位置都将有布局统一管理。布局、控件和图片的结合基本上就算有简单的UI部件组成了。

完结了，今天就回忆到这里吧。写程序反正急不得，每天进一小步，总比原地踏步强。