(权威古玩鉴定公司)
Layout组件
Layout是一种容器组件，容器能够开启自动布局功能，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能。
水平布局容器
垂直布局容器
网格布局容器
Layout属性
属性功能说明Type布局类型，支持NONE,HORIZONTAL，VERTICAL和GRID。
NONE不会对子节点进行自动布局；
HORIZONTAL横向自动排列子节点；
VERTICAL垂直自动排列子节点；
GRID采用网格方式对子节点进行自动布局；ResizeMode缩放模式，支持NONE，CHILDREN和CONTAINER。
NONE不会对子节点和容器进行大小缩放；
CHILDREN对子节点的大小进行缩放
CONTAINER对容器的大小进行缩放PaddingLeft排版时，子物体相对于容器左边框的距离。PaddingRight排版时，子物体相对于容器右边框的距离。PaddingTop排版时，子物体相对于容器上边框的距离。PaddingBottom排版时，子物体相对于容器下边框的距离。SpacingX水平排版时，子物体与子物体在水平方向上的间距。NONE模式无此属性。HorizontalDirection指定水平排版时，第一个子节点从容器的左边还是右边开始布局。当容器为Grid类型时，此属性和StartAxis属性一起决定Grid布局元素的起始水平排列方向。VerticalDirection指定垂直排版时，第一个子节点从容器的上面还是下面开始布局。当容器为Grid类型时，此属性和StartAxis属性一起决定Grid布局元素的起始垂直排列方向。CellSize此属性只在Grid布局时存在，指定网格容器里面排版元素的大小。StartAxis此属性只在Grid布局时存在，指定网格容器里面元素排版指定的起始方向轴。
详细说明
添加layout组件之后，默认的布局类型是NONE，它表示容器不会修改子物体的大小和位置，当用户手动摆放子物体时，容器会以容纳所有物体的最小矩形区域作为自身大小
通过修改属性检查器里面的Type可以切换布局容器的类型，可以切换水平、垂直或者网格布局。
另外，所有容器均支持(NONE容器只支持CONTAINER、NONE)。
当ResizeMode设置为NONE时，子物体和容器的大小变化互不影响。
设置CHILDREN则子物体大小会随着容器的大小而变化。
设置CONTAINER则容器的大小会随着子物体的大小而变化。
注意：
Layout不会考虑子节点的缩放和旋转。
Layout的设置后的结果需要到下一帧才会更新，除非你在设置完以后手动调用updateLayout
使用范例
例子一
TypeResizeModeHorizontalDirectionHORIZONTALNONELEFT_TO_RIGHT
在使用的过程中发现的特点：
在我在父节点之中添加子节点的时候，每一个子节点都会按照lefttoright从左到右的排列顺序进行排序
如果子节点不进行对齐挂件的操作，因为是水平布局，所以并没有在垂直坐标进行约束，这时候子节点可以随意的进行上下拖动，出现途中参差不齐
一旦子节点添加超过了容器父节点的大小，那么就会出现图中截断现象
解决方法就是：
1.设置ResizeMode为CHILDREN会对子节点进行大小缩放以变适应容器的大小来显示所有的子节点
2.设置ResizeMode为CONTAINER对容器的大小进行缩放，这样容器就会有可能超过你设备的屏幕从而看不到所有的子节点，这样可以保证子节点不所以变化，容易会变大，这种形式一般用于滚动视图ScrollView
例子二
TypeResizeModeHorizontalDirectionHORIZONTALCHILDRENLEFT_TO_RIGHT
这个例子就是为了验证在例子一种出现截断，以保持容器父节点不变的情况下，缩小子节点为代价的布局方案，这种方式的特点
所有的子节点全部显示在父节点当中
子节点会根据父节点的大小而改变自身的大小，父节点不会改变
子节点大小，如果定义小的限制就需要设置子节点数量，子节点的数据直接关联子节点的大小
例子三
在一些特殊的场合，一个需求，水平布局的一组子节点(item)，子节点(item)的大小是固定的，随着添加的子节点(item)的增加，设备的屏幕大小不够使用，子节点(item)出现断裂，超出屏幕，在这种情况下，我们通常会使用Scrollview、PageView这两种父节点(SuperView)。
ScrollView
创建一个ScrollView的节点，删掉里面不必要的内容，只留下ScrollView、view，然后在这个节点当中设置它的属性块Content，content=view
选中ScrollView设置它的属性：横向滚动、等等你需要的设置，添加widget(对齐挂件)left、right、top、bottom=0px全屏适配
在View(ScrollView的centent)添加widget(对齐挂件)、Layout(布局)并设置属性
横向滚动、父节点（SuperView）根据子节点(SubView)的数量占用的大小拉伸父节点的宽度
设置View的widget，left、top、bottom=0px，父节点变化的时候，不会改变x的大小(View在ScrollView中的初始位置)，
View的属性设置
Type=HORIZONTAL横向ResizeModel=CONTAINER//父节点随子节点的数量拉伸padingall=10px//所有边距为10spacingx(子节点间隔)=10px//子节点的间隔为10HorizontalDirection=left_to_right//横向排列子节点时，总左向右
验证得到的结果是当我在View中创建多个子节点，超出屏幕的大小时，View会自动拉伸，View的父节点是ScrollView可以滚动
当然Layout还是会有很多的应用，在工作当中会经常用到这个UI组件，时间长了自然而然也就熟悉了
EditBox组件
EditBox是一个文本输入框，该组件能让你获取到用户输入的内容，就是输入文字、获取文字的地方。
EditBox属性
属性功能说明String输入框的初始输入内容，如果为空则会显示展位符的文本Backgroundimage输入框的背景图片KeyboardReturnType指定移动设备上面回车按钮的样式InputFlag指定输入标示：可以指定输入方式为密码或者单词首字母大写（仅支持Android）InputMode指定输入模式：ANY表示多行输入，其他都是单行输入，移动平台上还可以指定键盘样式。FontSize输入框文本的字体大小StayOnTop输入总是可见，并且永远在游戏视图的上面Tabindex修改DOM输入元素的tabindex，这个属性只有在Web上面修改有意义。LineHeight输入框文本的行高FontColor输入框文本的颜色Placeholder输入框占位符的文本内容PlaceholderFontSize输入框占位符的字体大小PlaceholderFontColor输入框占位符的字体颜色MaxLength输入框最大允许输入的字符个数
查看属性检查器中的EditBox组件
EditBox事件
EditingDidbegan事件的定义
属性功能说明Target带有脚本组件的节点Component脚本组件名称Handler指定一个回调函数，当用户开始输入文本的时候会调用该函数CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入
TextChanged事件的定义
属性功能说明Target带有脚本组件的节点Comp
EditingDided事件的定义
属性功能说明Target带有脚本组件的节点Component脚本组件名称Handler指定一个回调函数，当用户输入文本结束时会调用该函数CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入
EditingReturn事件的定义
属性功能说明Target带有脚本组件的节点Component脚本组件名称Handler指定一个回调函数，当用户输入文本按下回车键时会调用该函数。CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入
EditBox详细说明
KeyboardReturnType特指在移动设备上面进行输入的时候，弹出的虚拟键盘上面的回车键样式
如果需要输入密码，则需要把InputFlag设置为password，同时InputMode必须是Any之外的选择，一般选择SingleLine。
如果要输入多行，可以把InputMode设置为Any。
注意：如果在iframe（嵌入式框架）里面使用，最好把stayOnTop属性设置为true
注解：iframe优缺点、IFrame在网页中有什么作用
添加脚本、和使用脚本添加回调
第一种通过属性检查器，编写脚本回调，两者结合的添加EditBox的回调
在层级管理器当中创建一个EditBox，名为EditBoxView
资源管理器中添加一个EditBoxScript脚本文件，并添加需要的回调函数
({exts:,properties:{},/**EditBox文本输入框的回调函数**/onEditDidBegan:function(editbox,customEventData){//这里editbox是一个对象//这里的customEventData参数就等于你之前设置的"foobar"//alert(customEventData);(customEventData);},//假设这个回调是给editingDided事件的onEditDided:function(editbox,customEventData){//这里editbox是一个对象//这里的customEventData参数就等于你之前设置的"foobar"(customEventData);},//假设这个回调是给textChanged事件的onTextChanged:function(text,editbox,customEventData){//这里的text表示修改完后的EditBox的文本内容//这里editbox是一个对象//这里的customEventData参数就等于你之前设置的"foobar"(customEventData);},//假设这个回调是给editingReturn事件的onEditingReturn:function(editbox,customEventData){//这里editbox是一个对象//这里的customEventData参数就等于你之前设置的"foobar"(customEventDat);},});将EditBoxScript脚本文件添加到EditBoxView上面，属性检查器当中出现下面一项
在属性检查器中的EditBox属性块中添加在EditBoxScript脚本中写好的方法
第二种通过代码添加EditBox回调
这种方法添加的事件回调和使用编辑器添加的事件回调是一样的，通过代码添加，你需要首先构造一个对象，然后设置好对应的target,component,handler和customEventData参数。
编写脚本文件EditBoxScript1
({exts:,properties:{},onLoad(){vareditboxEventHandler=();=;//这个node节点是你的事件处理代码组件所属的节点="EditBoxScript1"="onEditDidBegan";="foobar";vareditbox=();(editboxEventHandler);//你也可以通过类似的方式来注册其它回调函数//(editboxEventHandler);//(editboxEventHandler);//(editboxEventHandler);},onEditDidBegan:function(editbox,customEventData){//这里editbox是一个对象//这里的customEventData参数就等于你之前设置的"foobar"(customEventData);},//假设这个回调是给editingDided事件的onEditDided:function(editbox,customEventData){//这里editbox是一个对象//这里的customEventData参数就等于你之前设置的"foobar"(customEventData);},//假设这个回调是给textChanged事件的onTextChanged:function(text,editbox,customEventData){//这里的text表示修改完后的EditBox的文本内容//这里editbox是一个对象//这里的customEventData参数就等于你之前设置的"foobar"(customEventData);},//假设这个回调是给editingReturn事件的onEditingReturn:function(editbox,customEventData){//这里editbox是一个对象//这里的customEventData参数就等于你之前设置的"foobar"(customEventData);},});将该脚本拖入到目标UI组件YourEditBoxName属性检查器
**运行就可以拿到代码定义好的回调，以及代码中指定传输的值以上**
第三种方式通过('editing-did-began',)的方式来添加
编写脚本文件EditBoxScript2
({
exts:,
properties:{
},
onLoad:function(){
vareditbox=();
('editing-did-began',,this);
},
callback:function(event){
//这里的event是一个EventCustom对象，你可以通过获取EditBox组件
//vareditbox=;
//dowhateveryouwantwiththeeditbox
();
}
});
//同样的，你也可以注册'editing-did-ed','text-changed'和'editing-return'事件，这些事件的回调函数的参数与'editing-did-began'的参数一致。
将该脚本拖入到目标UI组件YourEditBoxName属性检查器
官方文档的坑
官方文档其中写到的内容，，获取到的对象获取不到string，我在debug的时候调试看到event其实就是EditBox这个对象
callback:function(event){//这里的event是一个EventCustom对象，你可以通过获取EditBox组件vareditbox=;//错误//dowhateveryouwantwiththeeditbox}所以上述内容应该这么写
callback:function(event){();}以上是三种EditBox的回调事件的实现
RichText组件
一个富文本组件
BBCode标签的内容，请参考本文档的BBCode标签格式说明
富文本的脚本接口请参考RichTextAPI。
RichText属性
属性功能说明String富文本的内容字符串，你可以在里面使用BBCode来指定特定文本的样式HorizonalAlign水平对齐方式FontSize字体大小，单位是point（注意，该字段不会影响BBCode里面设置的字体的大小）Font富文本定制字体，所有Label片段都会使用使用这个定制的TTF字体LineHeight字体行高，单位是pointMaxWidth富文本的最大宽度，传0的话意味着必须手动换行ImageAtlas对于img标签里面的src属性名称，都需要在imageAtlas里面找到一个有效的spriteFrame，否则imgtag会判断失效HandleTouchEvent选中选项后，RichText将阻止节点边界框中的所有输入事件（鼠标，触摸），从而防止输入事件穿透到底层节点
BBCode标签格式
下面分别是应用size和color标签的一个例子：
color=green你好/color，size=50Mylove/
支持标签
注意：
/br和
都是不支持的。img给富文本添加图文混排功能，img的src属性必须是ImageAtlas图集里面的一个有效的spriteframe名称imgsrc='ImageUrl'click='handler'/注意:只有imgsrc='ImageUrl'click='bar'/这种写法是有效的。如果你指定一张很大的图片，那么该图片创建出来的精灵会被等比缩放，缩放的值等于富文本的行高除以精灵的高度。
标签与标签是支持嵌套的，且嵌套规则跟HTML是一样的。比如下面的嵌套标签设置一个文本的渲染大小为30，且颜色为绿色。
size=30color=greenI'mgreen/color/size
也可以实现为:
color=greensize=30I'mgreen/size/color
详细说明
富文本组件全部由JS层实现，采用底层的Label节点拼装而成，并且在上层做排版逻辑。这意味着，你新建一个复杂的富文本，底层可能有十几个label节点，而这些label节点都是采用系统字体渲染的，
所以，一般情况下，你不应该在游戏的主循环里面频繁地修改富文本的文本内容,这可能会导致性能比较低。
另外，如果能不使用富文本组件，就尽量使用普通的文本组件，并且BMFont的效率是最高的。
作者：struggle3g
p[天涯明月刀手游古玩鉴定]