Flex移动网格单元格渲染器-图片

Question

我正在尝试在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

Answer 1

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

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

<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>

Answer 2

通过使用MobileGridBitmapCellRenderer iconFunction，我可以按此页面所述嵌入图像

仍然存在两个问题。

1. 我只能看到“重复”的缩放模式。
2. 我想使用来自MobileGrid数据源的动态图像。 此时，我必须使用嵌入在AS3中声明一个图标。
3. 我想在同一单元格中合并图像和文本。

理想情况下，我将能够简单地指定source属性。