调整组件的大小

Question

我有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％。在我尝试正确缩放组件时，我将高度设置为宽度的百分比。

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

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

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

Answer 1

This post以this library

回答

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

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

Answer 2

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

• 将组件的resizeMode设置为scale
• 为侦听器中的updateComplete事件添加侦听器，操纵$scaleX命名空间的$scaleY和mx_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>

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

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

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