Question

我正在使用Adobe Flex 4.5为平板电脑编写图像查看器应用程序。基本上，我有一个列表，其中包含一个自定义项呈示器，用于呈现列表中的图像。我已将图像大小设置为平板电脑设备的纵向宽度/高度（600x1024）。这样，一次只能看到一个图像。问题是，当设备定位到横向时，这种设计显然会搞砸了。我的问题是，当方向发生变化时，我怎样才能自动更改图像的宽度/高度，以便一次只显示一个图像？或者，有更好的方法来解决这个问题吗？

这是我的清单：

<s:List width="600" height="1024"
        id="imageList" dataProvider="{data}" itemRenderer="{inlineRenderer}"  click="imageList_clickHandler(event)"
        verticalScrollPolicy="off" useVirtualLayout="true">
    <s:layout>
        <s:HorizontalLayout columnWidth="600"/>
    </s:layout>
</s:List>

这是项目渲染器：

<s:Scroller width="600" height="1024">
                <s:Group>
                    <s:Image source="{data.imageurl}" width="600" height="1024"
                                   contentLoader="{FlexGlobals.topLevelApplication.imageCache}"/>
                </s:Group> </s:Scroller>

Answer 1

以下是如何创建仅自动处理方向更改的图像项呈示器的示例：

<s:List id="list" width="100%" height="100%">
    <s:dataProvider>
        <s:ArrayList>
            <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String>
            <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String>
            <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String>
            <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String>
            <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String>
        </s:ArrayList>
    </s:dataProvider>
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer width="{outerDocument.list.width}" 
                            height="{outerDocument.list.height}">
                <fx:Script>
                    <![CDATA[
                        import spark.core.ContentCache;
                        [Bindable]
                        public static var imageCache:ContentCache = new ContentCache();

                        override public function set data(value:Object):void {
                            super.data = value;
                            bitmapImage.source = data;
                        }
                    ]]>
                </fx:Script>
                <s:BitmapImage id="bitmapImage" contentLoader="{imageCache}" width="100%" height="100%" />
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

这个渲染器应该表现得相当好，即使它是用MXML编写的，因为它遵循一些简单的优化规则（参见http://flexponential.com/2011/04/20/flex-performance-tips-tricks/），但是你需要在你的应用程序中测试它以确保它感觉良好。

通常，Adobe建议通过扩展LabelItemRenderer或IconItemRenderer来在ActionScript中编写项呈示器，以获得最佳性能。如果上面的渲染器不够快，那么您可能需要查看https://bugs.adobe.com/jira/browse/SDK-30043以了解当前问题以及使用IconItemRenderer执行此操作的解决方法。

Flex中图像列表上的一个图像的纵向和横向方向的一致视图

1 个答案: