我正在尝试使用 Flex 组件框架创建自定义 Flex 组件:
http://www.adobe.com/livedocs/flex/3/html/help.html?content=ascomponents_advanced_3.html http://www.adobe.com/livedocs/flex/3/html/help.html?content=ascomponents_advanced_3.html.
所有好的组件都允许您使用百分比值来定义其尺寸:
MXML:
文本输入宽度=“100%”
or
运行时的动作脚本:
textinp.percentWidth = 100;
我的问题是如何在自定义组件的measure()方法中实现百分比宽度/高度?更具体地说,这些百分比在某个阶段被转换为像素值,这是如何完成的?
Flex 布局的工作方式是让每个组件将其子组件布局为父组件指定的大小。 “Children”确实包括常见的子项 - getChildren()、numChildren - 以及构成边框、手柄等的组件,这些组件称为“chrome”,是 getRawChildren() 的一部分。
Flex 框架现在对所有组件(实际上是显示树的一部分)执行两次循环。第一个是自下而上(首先是最深的嵌套元素)并调用measure()方法。它应该计算组件将占用多少空间(宽度/高度),如果它可以拥有所需的空间,没有限制(想想:滚动条),并将其放入measuredWidth和measuredHeight属性中。其次,它计算它想要有多少空间作为绝对最小值,并将其放入measuredMinHeight/measuredMinWidth中。为了计算这个值,使用 getExplicitOrMeasuredHeight()/Width() 询问边框厚度、镶边和常规子项的尺寸,并将其相加。这就是为什么它是深度优先的。
第二个循环是进行实际的布局。这从树的顶部开始,并调用 updateDisplayList,其中 x/y 参数告诉组件它实际有多少大小。根据这些信息,组件将告诉其直接子组件它们应该在哪里(相对于它们的父组件)以及它们应该有多大 - child.move(x,y) 和 child.setActualSize(w,h)
所以实际上是父容器考虑了相对大小。您的组件在measure()中声明它是理想的(最小尺寸,以便可以显示所有内容)和最小尺寸,并且必须处理它在updateDisplayList()中获得的任何内容。父组件占用其拥有的可用空间,确保每个组件获得其最小大小,然后将其余部分分配给所有组件。在此阶段,它将查看其子级的percentWidth/Height 属性。
因此,如果您想将组件放入像 HBox 这样的标准 Flex 容器中,则无需执行任何特殊操作即可使百分比大小正常工作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)