egret-docs-master/extension/EUI/autoLayout/layoutDebug
guofei 4fe0162b34 fist commit 2024-06-19 13:32:32 +08:00
..
55cdd7a6db3f7.png fist commit 2024-06-19 13:32:32 +08:00
README.md fist commit 2024-06-19 13:32:32 +08:00

README.md

组件上与调试相关的布局属性

  • (1)includeInLayout指定此组件是否包含在父容器的布局中。若为false则父级容器在测量和布局阶段都忽略此组件。默认值为true。visible属性与此属性不同设置visible为false父级容器仍会对其布局。如果想”完全”隐藏掉一个组件同时设置它的visible和includeInLayout为false即可。另外这个属性对于缓动动画也非常有用如果要对一个含有自动布局的UI组件执行缓动动画在动画开始时设置此属性为false即可它会确保UI组件从当前的布局结果位置开始缓动并且不再受自动布局影响。

  • (2)explicitWidthexplicitHeight显式设置的宽高值。默认情况下这两个值是NaN。当显式调用width或height的setter方法赋值时就会同时对这两个值赋值。width/height的值不一定会是显示设置的值。如果设置了布局属性top+bottom等就会导致width/height被父级设置成其他值父级布局尺寸的优先级高于显式设置尺寸。所以这两个属性的作用就是保存显式设置的值。调试的时候也可以根据这个判断是否被显式设置了尺寸还是父级强制布局的。

  • (3)maxWidth,minWidth,maxHeight,minHeight最大和最小尺寸。这里要注意它们同时影响测量和布局的结果。measure()方法执行完会对measuredWidthmeasuredHeight赋值一次。然后交给UIComponent里的validateSize()方法再次规范测量结果。这时候就根据这四个值来规范的。最终确定measuredWidthmeasuredHeight的值。布局时同理。

  • (4)width,height这两个属性储存组件经过各种布局计算后得到的最终的尺寸值。width和height的取值规则如果没有显式设置它们就会根据测量的值赋值到它们上显式设置了就以显式设置的值为准但是如果同时设置top+bottom或percentHeight这种布局属性的值就会以布局属性为准。总结下优先级顺序是布局设置的值 > 显式设置的值 > 测量的值。

注意:以下的几个属性仅为了方便调试使用,均只存在于调试版代码中,可以通过调试工具在运行时查看,在发行版中,将无法访问它们。

  • (5)measuredWidthmeasuredHeight每个组件measure()方法执行的最终结果就是对这两个属性赋值。它们只记录测量结果。

  • (6)preferredWidthpreferredHeight首选宽高这两个值通常在measure()方法中被调用。只是个便捷属性按照explicitWidthexplicitHeight > measuredWidthmeasuredHeight的优先级返回值。布局类在measure()方法中,调用子项的这个属性,来获取子项的测量结果。累加到自身的测量结果上。注意这个值已经包含旋转和缩放的值,且返回值永远为正数。

  • (7)layoutBoundsWidth,layoutBoundsHeight布局宽高这两个值通常在updateDisplayList()方法中被调用。也是个便捷属性。按照 布局设置的宽高 > explicitWidthexplicitHeight > measuredWidthmeasuredHeight的优先级返回值。注意这个值已经包含旋转和缩放的值且返回值永远为正数。

  • (8)preferredX,preferredY,layoutBoundsX,layoutBoundsY这四个属性通常情况下就是xy的值。但是当组件含有旋转缩放时。他们为组件旋转缩放后在父级容器里实际显示的起点。

使用调试工具

Egret Inspector 是一款Chrome开发者工插件能够帮助开发者快速查看显式列表每个对象的属性显式隐藏显示对象或修改对象属性。使用这个工具能够极大程度方便自动布局的调试。具体安装和使用教程可以参考这里Egret Inspector使用手册

调试技巧

在没有自动布局的体系里,若某个组件的尺寸表现错了,直接在这个组件上找问题即可。但当我们引入自动布局后,由于组件在显示列表上的布局是互相影响的。所以一个组件的尺寸或位置不对。问题不一定是在这个组件上,而是有可能在他的父级或子项上。所以调试的第一步,一定是先定位到出问题的那个组件。再调试那个组件找出显示不正确的原因。定位的方法可以参考以下步骤进行:

  • (1)自身是否被显式设置了尺寸查看explicitWidthexplicitHeight。如果显式设置了设置的对吗不对找到问题。没有显式设置就继续。

  • (2)测量的尺寸对不对查看measuredWidthmeasuredHeight。不对继续。对跳到(5)

  • (3)查看top,left,right,bottom,horizontalCenter,verticalCenter,percentWidth,percentHeight这些布局属性对不对。注意只有BasicLayout下这些属性才全部有效。

  • (4)布局类对吗查看layout属性。以上都查过了找不出问题继续按(5)和(6)在显示列表向上或向下开始找。

  • (5)向上查看父级以及父级的父级容器的相关属性,是否正确。是否是父级容器强制设置了尺寸。

  • (6)查看子项以及子项的子项的测量尺寸。找到第一个开始不对的节点。

注意因为Skin是非显示对象所以它不在显示列表上但是Skin上的宽高设置也会影响测量。所以检查显示列表时不要忽略Skin这一层。可以从组件的skin属性上访问它。