在AS3/MXML中,为什么将组件的高度绑定到高度/ 2比将其绑定到50%更好?

Pan*_*sis 0 apache-flex air flash mxml actionscript-3

采用以下AS3/MXML代码:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" xmlns="*"
        backgroundColor="#000000" showStatusBar="false" width="400" height="400"
        minWidth="0" minHeight="0">
    <s:Rect width="50%" height="50%">
        <s:fill>
            <s:SolidColor color="#0000FF"/>
        </s:fill>
    </s:Rect>
</s:WindowedApplication>
Run Code Online (Sandbox Code Playgroud)

这主要是有效的.当我增加或减少程序的大小时,Rect的大小将缩放为WindowedApplication的宽度和高度的50%.但是随着我不断降低窗口的高度,缩小比例会停止几个像素,这个数字很小.这就像我可以让Rect沿着y轴一样小:

在此输入图像描述

在达到这一点之后,即使我不断减小WindowedApplication的大小,也没有任何反应.在我再次开始增加窗口大小之前,Rect保持完全相同的高度.更重要的是,Rect的高度为12像素,这是一个非常随意的数字,它可以停止.

但是,如果我改变:

    <s:Rect width="50%" height="50%">
Run Code Online (Sandbox Code Playgroud)

至:

    <s:Rect width="{width / 2}" height="{height / 2}">
Run Code Online (Sandbox Code Playgroud)

这个问题神奇地消失了:

在此输入图像描述

WindowedApplication的高度为5,Rect的高度约为"两个半".

为什么会有这样的区别?在前面的例子中,我尝试增加,然后再次减小尺寸几次,甚至缓慢,但它总是卡在同一个地方.谢谢!

Jef*_*ser 6

实际上这里有几个独立的属性:

  • 高度
  • percentHeight
  • explicitHeight属性

高度实际上只是在百分之高和明确高度背后的一些烟雾和镜子.

在第一种方法中,即使您在MXML中将height属性指定为百分比; Flex Compiler在幕后做了一些魔术来检查百分比字符'%'并设置percentHeight属性而不是宽度.

由于在设置百分比高度时没有给出明确的高度; s:Rect的validateSize()方法应该执行.此方法看起来与Flex Component lifeCycle的measure()方法并行.

validateSize()方法对explicitMinHeight属性进行一些检查

if (!isNaN(explicitMinHeight) && measuredHeight < explicitMinHeight)
    measuredHeight = explicitMinHeight;
Run Code Online (Sandbox Code Playgroud)

所以,实质上,有一个最小高度; 组件的高度不会低于.

但是,在第二种方法中,您没有指定指定实际值的百分比.因此,设置explicitHeight值.因为设置了显式高度,该高度优先,并且不需要执行validateSize()方法.validateSize()中的这一行跳过它:

if (!canSkipMeasurement())
    measure();
Run Code Online (Sandbox Code Playgroud)

protected function canSkipMeasurement():Boolean
{
    return !isNaN(explicitWidth) && !isNaN(explicitHeight);
}
Run Code Online (Sandbox Code Playgroud)

所以,希望这是有道理的.

综上所述; 如果设置百分比高度; 然后Flex计算高度并且有一个最小值.如果设置了明确的高度; 然后Flex使用该值并跳过自己的内部计算.

[我只对粗略的框架代码进行了粗略的审查,因此您将不得不重新审视代码以深入挖掘]