Question

我是Flex新手，正在浏览个人任务列表以供学习之用。目前正在使用列表来显示图像数组。我的最后5张图片大于列表尺寸。当我设置width =＆＃34; 100％＆＃34;对于图像，它在图像的上方和下方添加空白/填充。有一个母马试图摆脱它。这是代码：

<s:List id="fgList" left="{width * 0.2}" height="100%" width="75%"
        useVirtualLayout="false" pageScrollingEnabled="false"
        verticalScrollPolicy="on" horizontalScrollPolicy="off"
        contentBackgroundAlpha="0" itemRenderer="{null}">
    <s:layout>
        <s:VerticalLayout requestedRowCount="-1" variableRowHeight="true" gap="10"/>
    </s:layout>
    <s:dataProvider>
        <s:ArrayList id="fgImages">
            <s:Image source="@Embed('assets/fg-v1-img001.png')" width="100%"/>
            <s:Image source="@Embed('assets/fg-v1-img002.png')" width="100%"/>
            <s:Image source="@Embed('assets/003.jpg')" width="100%"/>
            <s:Image source="@Embed('assets/004.jpg')" width="100%"/>
            <s:Image source="@Embed('assets/005.jpg')" width="100%"/>
            <s:Image source="@Embed('assets/006.jpg')" width="100%"/>
            <s:Image source="@Embed('assets/007.jpg')" width="100%"/>
        </s:ArrayList>
    </s:dataProvider>
</s:List>

关于它为何如此表现的解释将是有益的。怀疑列表在图像调整大小操作发生之前首先生成图像行，因此是空白。这不会影响前2个图像，因为它们与列表一致，具有精确的宽度尺寸。那么在图像创建完成后我是否需要某种ItemRenderer / Script来调整列表行的大小？

由于

[编辑]好吧，由于我发现并改编了一个小脚本，我已经解决了这个问题。分享有需要的人：

private function imageLoaded(event:Event):void {
    var img:Image = event.target as Image;
    img.scaleX = img.scaleY = (fgList.width / img.sourceWidth);
}

通过creationComplete调用函数：

<s:Image source="@Embed('assets/fg-v1-img001.png')" smooth="true" creationComplete="imageLoaded(event)"/>

Answer 1

您需要在这里查看两个属性。 Image.scaleMode和Image.fillMode。

默认情况下，fillMode设置为scale，这会将图像缩放到指定的大小。这就是你想要的。其他选项为clip，它会以实际尺寸显示图像，只遮盖指定尺寸以外的区域，repeat，如果指定的尺寸较大，将重复图像。< / p>

所以scaleMode是你需要改变的。默认情况下，它设置为letterbox，即图像的letterbox。它会缩放图像，直到它达到区域的一个极限，同时保持原始宽高比。如果图像和区域的纵横比不同，它会在达到第一个限制时立即停止，在边缘上留下空白。这与在电视上观看大多数电影时获得的效果相同，因为电影的宽高比通常与电视使用的16：9不同。这是你正在经历的。

其他两个选项stretch和zoom将更改宽高比以匹配指定区域。顾名思义，stretch将拉伸两个轴以填充该区域。根据定义，这将扭曲图像的比例。您需要的选项是zoom，它会缩放图像，直到填满整个区域。但是，将将图像的一部分推出可见区域。但是，一般情况下，它是最好的选择，除了使用正确的宽高比之外，确实没有办法避免它。此外，这将使图像垂直和水平居中。我不确定你是否可以改变它;我老实说从未尝试过。

<s:Image source="@Embed('assets/007.jpg')" width="100%" scaleMode="zoom"/>

上面的代码应该可以解决问题。您可能还需要指定高度，但我不确定。我知道每次使用zoom时我都会测试，并且似乎永远不会记得答案是什么。

从Spark列表图像项中删除宽度为100％的空格

1 个答案: