调整组件的大小

时间:2013-04-16 18:22:39

标签: flex flex-spark

我有SampleComponent

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         resizeMode="scale">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Image source="@Embed('assets/images/soLogo.jpg')" width="100%" height="100%" scaleMode="stretch" />

</s:Group>

它只有一个图像可以拉伸以填充整个组件区域,组件resizeMode设置为“缩放”。

我将此组件放入具有以下代码的应用程序中:

<local:SampleComponent id="sample" 
                       width="100%" 
                       height="{sample.width * 0.2961165048543689}" />

宽度设置为应用程序宽度的100%。在我尝试正确缩放组件时,我将高度设置为宽度的百分比。

调整应用程序窗口大小时,它看起来像这样:

Resizing to scale

这里的最后一张图片是我的问题,它超出了应用程序的范围。

  • 如何在不超出父容器边界的情况下调整组件大小?
  • 是否有更正确的缩放组件的方法?

2 个答案:

答案 0 :(得分:3)

This postthis library

回答

我认为你可能也会这样做:

width="{Math.min(container.width, container.height * ratio)}" 
height="{Math.min(container.height, container.width / ratio)}"

答案 1 :(得分:0)

我想我已经想出了一个更好的方法:

  • 将组件的resizeMode设置为scale
  • 为侦听器中的updateComplete事件添加侦听器,操纵$scaleX命名空间的$scaleYmx_internal属性。

示例:

<s:Group id="myContainer" resizeMode="scale">
    <!-- Some children, images etc... -->
    <s:updateComplete>
    <![CDATA[
            import mx.core.mx_internal;

            myContainer.mx_internal::$scaleX = Math.min(myContainer.mx_internal::$scaleX, myContainer.mx_internal::$scaleY);
            myContainer.mx_internal::$scaleY = myContainer.mx_internal::$scaleX;
    ]]>
    </s:updateComplete>
</s:Group>

这种方式更好,因为...

  • 它允许事先不知道宽高比。
  • 它还允许复杂的布局和许多孩子,其中比率可以在运行时改变。

如果经常使用,可以改为创建库函数。