Flex 移动网格单元渲染器 - 图像答案

【问题标题】：Flex Mobile Grid Cell Renderer - ImageFlex 移动网格单元渲染器 - 图像
【发布时间】：2014-07-26 01:30:42
【问题描述】：

我正在尝试在 Flex 移动网格中渲染图像，但无法显示 MobileGridBitmapCellRenderer。只是没有图像可见。

有人看出什么不对了吗？这是我的代码：

<ns:MobileGrid  id="myDataGrid" textAlign="left" width="100%" height="100%" borderVisible="true" dataProvider="{pDataCollection}"
                   sortChange="myDataGrid_sortChangeHandler(event)" scrollSnappingMode="leadingEdge" change="myDataGrid_changeHandler(event)"
                   touchInteractionEnd="myDataGrid_touchInteractionEndHandler(event)">
        <ns:columns>
            <ns:MobileGridColumn dataField="id" width="8%">
                <ns:itemRenderer>
                    <fx:Component>
                        <ns:MobileGridBitmapCellRenderer source="@Embed('images/espn-profile-pics/tiny4821.png')"  width="100%" />

                    </fx:Component>
                </ns:itemRenderer>
            </ns:MobileGridColumn>
            <!--ns:MobileGridColumn dataField="player">
            <ns:itemRenderer>
            <fx:Component>
            <ns:MobileGridTextCellRenderer labelField="player"/>
            </fx:Component>
            </ns:itemRenderer>
            </ns:MobileGridColumn-->
            <ns:MobileGridColumn dataField="player" width="22%"/>
            <ns:MobileGridColumn  dataField="year" width="9%"/>
            <ns:MobileGridColumn  dataField="team" width="9%" />
        </ns:columns>       
    </ns:MobileGrid>

但是，MobileGridTextCellRenderer 工作得很好。我已经阅读了以下文档，但我仍然不明白。

http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Usage-Example-td5308.html http://flex.apache.org/asdoc/spark/components/itemRenderers/IMobileGridCellRenderer.html http://flex.apache.org/asdoc/spark/components/itemRenderers/MobileGridBitmapCellRenderer.html

如果我为 itemRanderer 尝试此代码：

  <ns:itemRenderer>
    <fx:Component>
            <s:Image source="@Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
     </fx:Component>
</ns:itemRenderer>

我收到运行时错误：

错误：MobileGridColumn 项渲染器必须实现 spark.components.itemRenderers.IMobileGridCellRenderer

【问题讨论】：

标签： actionscript-3 apache-flex mobile flex-spark

【解决方案1】：

  <ns:itemRenderer>
    <fx:Component>
            <s:Image source="@Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
     </fx:Component>
</ns:itemRenderer>

此代码的问题是Image 不是有效的ItemRenderer，您需要将图像包装在以下内容中，例如：（编辑：代码已更新）

<ns:MobileGridColumn dataField="id" width="8%">
                <ns:itemRenderer>
                    <fx:Component>
                        <ns:MobileGridTextCellRenderer>
                            <s:Image source="@Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
                        </ns:MobileGridTextCellRenderer>
                    </fx:Component>
                </ns:itemRenderer>
            </ns:MobileGridColumn>

【讨论】：

很奇怪。您的代码出现此错误：MobileGridColumn 项目渲染器必须实现 spark.components.itemRenderers.IMobileGridCellRenderer。你使用成功了吗？
如何实现 IMobileGridCellRenderer？我希望我可以使用 .
我已经编辑了我的答案以使用实现IMobileGridCellRenderer 的类，不幸的是，没有基本的MobileGridCellRenderer 只有TextCell 和BitmapCell。如果这不起作用，您需要编写自己的 AS 类，其代码为 class MyClass extends ItemRenderer implements IMobileGridCellRenderer，然后创建 IMobileGridCellRenderer 要求 ItemRenderer 没有的任何函数
不幸的是它不起作用。描述资源路径位置类型“图像”声明必须包含在标记中，因为它没有实现“mx.core.IUIComponent”。由于文档非常有限，我无法扩展 IMobileGridCellRenderer。

【解决方案2】：

通过使用 MobileGridBitmapCellRenderer iconFunction，我可以嵌入图像，如 this page 中所述

一些问题仍然存在。

“重复”的缩放模式是我能看到图像的唯一模式。
我想使用来自 MobileGrid 数据源的动态图像。这时候我必须在 AS3 中使用 embed 声明一个图标。
我想在同一个单元格中合并图像和文本。

理想情况下，我可以简单地指定源属性。

【讨论】：