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

Question

我正在使用 Adob​​e 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 执行此操作的解决方法。