自适应流式布局
width="100%"
top left right
horizontalCenter=0
失效验证机制
这些异步过程都封装好了,我们只需要关注那一对方法: invalidateProperties() 和 commitProperties() ,前者标记属性失效,后者应用失效的属性
 
 
一个是测量验证   invalidateSize() 和 measure()
一个是布局验证。 invalidateDisplayList() 和 updateDisplayList()
 
这两组什么时候用呢
 
  如果你希望你自定义的组件像框架里的标准组件一样,能加入自动布局体系,就必须要同时复写measure()和updateDisplayList()这两个方法
  Group把自己的measure()方法交给了layout.measure()去实现,updateDisplayList()交给了layout.updateDisplayList()去实现。也就是把具体的布局方式解耦了出来,成了独立的一个LayoutBase类。这样所有的容器都可以采用Group+LayoutBase的组合的方式,为自己设置任意的布局。
解决异步问题

失效验证机制能够很好的确保自动布局的性能,但是却会带来新的异步问题,大部分情况下我们并不会感受到失效验证的异步存在,因为它总是在本帧屏幕刷新前验证失效列表的,只有小部分在验证失效过程中又产生了新失效的情况,才会延迟到下一帧去处理。这种情况会导致的结果通常就是在初始化面板时会闪一下。解决这个问题有好几种方案,可以一开始将面板添加到显示列表时设置visible为false,延迟一段时间后再显示它。我们这里再讨论另一种方案,提前处理失效验证:

  • 1.首先你要确定闪一下的异步问题是否是自动布局的失效验证引起的。如果是由于异步加载图片引起的,这种情况属于IO异步,必须先预加载图片资源。

  • 2.将面板添加到显示列表后,调用面板组件上的 validateNow() 方法即可。注意一定要先将面板添加到显示列表在调用立即验证的方法。

还有一种使用情景,不过很少会遇到,就是我们给一个组件设置了自动布局属性,比如 left 和 right,想要获得它布局后的准确宽度。这种情况也同样有两种思路:

  • 1.延迟到帧末失效验证结束时访问宽度。可以使用eui.callLater()方法来实现延迟回调,具体用法请参考API文档。

2.调用组件父级容器的 validateNow() 方法,这里请务必注意是"父级容器"的validateNow()方法,不是自身的,因为组件的布局是由父级容器决定的。
自动布局调试 includeInLayout  指定此组件是否包含在父容器的布局中
explicitWidth,explicitHeight 所以这两个属性的作用就是保存你显式设置的值
)maxWidth,minWidth,maxHeight,minHeight )maxWidth,minWidth,maxHeight,minHeight:最大和最小尺寸。这里要注意:它们同时影响测量和布局的结果。measure()方法执行完会对measuredWidth,measuredHeight赋值一次。然后交给UIComponent里的validteSize()方法,再次规范测量结果。这时候就根据这四个值来规范的。最终确定measuredWidth,measuredHeight的值。布局时同理。
width height 布局设置的值 > 显式设置的值 > 测量的值
measuredWidth,measuredHeight
每个组件measure()方法执行的最终结果就是对这两个属性赋值
它们只记录测量结果
)preferredWidth,preferredHeight 首选宽高,这两个值通常在measure()方法中被调用。只是个便捷属性,按照explicitWidth,explicitHeight > measuredWidth,measuredHeight的优先级返回值。布局类在measure()方法中,调用子项的这个属性,来获取子项的测量结果。累加到自身的测量结果上。注意这个值已经包含旋转和缩放的值,且返回值永远为正数。
)layoutBoundsWidth,layoutBoundsHeight: 布局宽高,这两个值通常在updateDisplayList()方法中被调用。也是个便捷属性。按照 布局设置的宽高 > explicitWidth,explicitHeight > measuredWidth,measuredHeight的优先级返回值。注意这个值已经包含旋转和缩放的值,且返回值永远为正数
preferredX,preferredY,layoutBoundsX,layoutBoundsY 这四个属性,通常情况下就是xy的值。但是当组件含有旋转缩放时。他们为组件旋转缩放后在父级容器里实际显示的起点。
调试技巧
(1)自身是否被显式设置了尺寸?查看explicitWidth,explicitHeight。如果显式设置了,设置的对吗?不对找到问题。没有显式设置就继续。
(2)测量的尺寸对不对?查看measuredWidth,measuredHeight。不对,继续。对,跳到(5)
(3)查看top,left,right,bottom,horizontalCenter,verticalCenter,percentWidth,percentHeight这些布局属性对不对。注意:只有BasicLayout下这些属性才全部有效。
(4)布局类对吗?查看layout属性。以上都查过了,找不出问题,继续按(5)和(6)在显示列表向上或向下开始找。
(5)向上查看父级以及父级的父级容器的相关属性,是否正确。是否是父级容器强制设置了我们的尺寸。
(6)查看子项以及子项的子项的测量尺寸。找到第一个开始不对的节点

EUI库 - 自动布局的更多相关文章

  1. EUI库 - 容器

      eui.UILayer UILayer是Group的子类它只有一个功能,到放到场景上后,宽高永远和场景宽度一致   Group Group 是自动布局的容器基类.如果包含的子项内容太大需要滚动显示 ...

  2. EUI库 - 9 - 数据集合 - 列表

      List 和DataGroup的区别 1 选中一项 会触发 eui.ItemEvent.ITEM_TAP 事件, 2 有选中项的概念,可以设置 List 里的默认选中项    selectedIn ...

  3. EUI库 - 9 - 数据集合 - 数组集合

      ArrayCollection  当数组内的数据被修改了(增删改),组件能有效的获知 myCollection.addEventListener(eui.CollectionEvent.COLLE ...

  4. EUI库 - 9 - 数据集合 - 数据容器

      DataGroup 设置一个数据源 自动创建内部所需的对象 来完成数据展示   还要设置单条数据的模板  叫ItemRenderer   继承关系 eui.List  eui.ListBase e ...

  5. EUI库 - 皮肤

      皮肤分离机制    皮肤分离机制对制作可复用的外观比较有优势 那对于只使用一次的皮肤呢?如果也拆分出两个文件,显然不太方便.这里我们针对单次使用的皮肤定制了内部类的功能   每个组件都有一个chi ...

  6. EUI库 - EXML

        EXML是可以运行时加载解析的   <e:Skin class="skins.ButtonSkin" states="up,down,disabled&qu ...

  7. EUI库 - 概述

        新特性 36k   访问EUI组件宽高时,也会跟原生显示对象的表现一致,立即能得到包含子项的宽高值   统一的显示列表  普通对象和eui对象都可用addChild来添加   一个逻辑组件只管 ...

  8. EUI库 - 10 - 使用自定义组件

      步骤 1 在根节点,添加一个自定义的命名空间  2 可以设置skinName 自定义组件规范 1 不复用的不要用自定义组件 2 属性必须要有默认值(赋值为null也可以),因为TS编译器会把没有默 ...

  9. EUI库 - 快速入口之项目配置

      egretProperties.json exmlRoot  指定exml文件存放根目录,该路径必须为相对路径,目录内只能有exml文件 themes    主题文件数组,配置所有主题文件路径,该 ...

随机推荐

  1. 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件

    使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...

  2. jenkins构建python项目时,提示python不是内部或外部命令的解决办法

    1.回到 Jenkins 首页,点击 “构建执行状态”或“Build Executor Status” ,右则会列出本机信息. 完美解决!!!

  3. vue 使用 element-ui 时报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf

    在vue项目中引用 element-ui 时,虽然按照 element-ui 的官方文档一步步操作,还是产生了下面的错误 解决这个问题的方法,就是在  web pack.config.js  文件中进 ...

  4. linux安装软件的几种方法----linux下编译安装软件的一般步骤

    linux安装软件的几种方法: 一.rpm包安装方式步骤: 1.找到相应的软件包,比如soft.version.rpm,下载到本机某个目录: 2.打开一个终端,su -成root用户: 3.cd so ...

  5. mysql多实例双主部署

    本文引自公司技术文档,仅作为记录. 背景 有的时候需要进行数据库环境的隔离,以及节省服务器资源一台mysql安装多个数据库实例,一个实例下构建多个数据库​ 安装mysql yum -y install ...

  6. L2-012. 关于堆的判断(最小堆)

    将一系列给定数字顺序插入一个初始为空的小顶堆H[].随后判断一系列相关命题是否为真.命题分下列几种: “x is the root”:x是根结点: “x and y are siblings”:x和y ...

  7. 第1节 网站点击流项目(上):4、网站的数据采集,使用flume的taildir实现多个文件的监控采集

    一. 模块开发----数据采集 1. 需求 在网站web流量日志分析这种场景中,对数据采集部分的可靠性.容错能力要求通常不会非常严苛,因此使用通用的flume日志采集框架完全可以满足需求. 2. Fl ...

  8. C++面试常见问题——14内存管理

    内存管理 内存管理由三种方式: 自动存储 静态存储 动态存储 自动存储 对于函数的形参.函数内部变量.和结构体变量等,编译器在函数运行过程中在栈中自动对其分配内存,调用结束后对其进行销毁.变量的声明周 ...

  9. 学生选课数据库MySQL语句练习题45道

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. select Sname,Ssex,Class from Student;2. 查询教师所有的单位即不重复的Depart列 ...

  10. u盘使用记录、痕迹删除技巧方法

    在日常生活的使用U盘过程当中,系统会记录下大量U盘的使用记录信息,那么接下来小编就来同大家分享介绍如何删除掉这些使用记录的方法知识. 1. 往系统里面添加环境变量devmgr_shownonprese ...