Question

<s:SkinnableContainer styleName="top" width="1458" height="131" >
            <s:VGroup left="50" verticalAlign="middle" height="131" styleName="profile_info">
                <s:Image source="@Embed(source='images/logo.png')"/>
            </s:VGroup>
</s:SkinnableContainer>

在我的申请表中我有这个：

<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"
    width="800" height="600" addedToStage="stretchHandler()">

    private function stretchHandler():void{
        stage.scaleMode = StageScaleMode.SHOW_ALL;
        stage.align = StageAlign.TOP;
        this.width = stage.stageWidth;
        this.height = stage.stageHeight;
    }

但是SkinnableContainer和里面的图像没有缩放，如何缩放它们？

Answer 1

要让您的内容缩放到它的容器，您必须将高度和宽度设置为百分比EG：

<s:SkinnableContainer styleName="top" width="100%" height="100%"/>

这会使您的容器始终与其父容器的大小相同。但是，容器的内容仍将遵循其自己的大小设置。

Layout settings也很重要，在Group中，两个设置为100％的对象会相互重叠，并且z顺序中较高的对象将位于顶部。但是在VGroup中，100％/ 100％的两个项目各占50％的高度和100％的宽度。

注1：Spark Image的作用类似于源图像的容器，而“容器”将扩展到父容器，源图像将遵循略有不同的规则，您必须使用Image.fillMode和{{ 1}}来控制它（I recommend reading the docs on this）

注2：所有Image.scaleMode都有最小/最大高度/宽度属性以及标准尺寸道具

Answer 2

试试这个，

所有容器的宽度和高度都应该是百分比（％），图像以及图像需要给出scaleMode="stretch" fillMode="scale"。

<s:SkinnableContainer left="300" styleName="top" width="90%" height="40%">
            <s:Image source="@Embed(source='images/logo.png')" width="100%" height="100%" scaleMode="stretch" fillMode="scale"/>    
    </s:SkinnableContainer>

这样可行。

如何在FLEX中扩展Skinnable容器及其所有孩子？

2 个答案: