未显示ItemRenderer图像

Question

我需要一些列表上的图像的帮助。我在第二个.mxml文件上有一个ItemRenderer的列表。列表必须显示来自rss项目的标题和图像，但列表中的图像不显示:(我的代码有什么问题？

这是HomeView.mxml代码：

   <?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:rssreader="services.rssreader.*"
        fontWeight="bold" title="Elektro-Vozila" viewActivate="getData()">

    <fx:Script>
        <![CDATA[

            import spark.events.IndexChangeEvent;
            protected function getData():void
            {
                getDataResult.token = rssreader.getData();
            }

            import mx.events.CollectionEvent;
            import valueObjects.Item;


            protected function fixEntityReferences(event:CollectionEvent):void
            {
                myList.labelFunction = replaceEntity;

                function replaceEntity(item:Item):String
                {
                    var p1:RegExp = /(&quot;)/ig; // perhaps add more here later
                    var thisString:String = item.title.replace(p1, "");
                    trace(thisString);
                    return thisString;

                }

            }

            protected function myList_changeHandler(event:IndexChangeEvent):void
            {

                var RSSItem:Object = myList.dataProvider.getItemAt(event.newIndex);
                navigator.pushView(DetailsView, RSSItem);
            }

        ]]>

    </fx:Script>

    <fx:Declarations>
        <s:CallResponder id="getDataResult"/>
        <rssreader:Rssreader id="rssreader"/>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:navigationContent>
        <s:Image right="20" height="52" source="images/logo.png"/>
    </s:navigationContent>

    <s:List id="myList" width="100%" height="100%" change="myList_changeHandler(event)" fontSize="0"
            fontWeight="normal" itemRenderer="views.icon">

        <s:AsyncListView list="{getDataResult.lastResult}"
                         collectionChange="fixEntityReferences(event)"/>

    </s:List>
</s:View>

And this is code from icon.mxml:

    <?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer  xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark"
                 autoDrawBackground="true">

    <s:states>
        <s:State name="normal" />
        <s:State name="selected" />
    </s:states>
    <s:VGroup width="100%" height="100%" gap="0">
        <s:HGroup width="100%" height="100%">
            <s:Image width="72" height="72" source="{data.rimage}"
                     scaleMode.normal="stretch"/>


            <s:VGroup width="100%" height="70" gap="0" paddingBottom="10" paddingLeft="10"
                      paddingRight="10" paddingTop="10"
                      height.normal="90" horizontalAlign.normal="justify">
                <s:Label text="{data.title}"
                         fontSize.normal="16" fontWeight.normal="normal"
                         verticalAlign.normal="justify"
                         styleName.selected="menuTitleText"/>

            </s:VGroup>
        </s:HGroup>
        <s:Line width="100%"><s:stroke><s:SolidColorStroke color="0x808080" weight="1" /></s:stroke></s:Line>
    </s:VGroup>


</s:ItemRenderer>

我尝试使用一些rimage选项，包括source="data.rimage"，rimage，{data.rimage}...但不工作:(

    <?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:rssreader="services.rssreader.*"
        title="{rtitle}" viewActivate="getDetails()">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            import valueObjects.Item;

            [Bindable] public var rimage:String;
            [Bindable] private var rtitle:String;
            [Bindable] private var rlink:String;
            [Bindable] private var rdesc:String;



            private function getDetails():void
            {

                var thisItem:Item = data as Item;

                rtitle = thisItem.title;
                rlink = thisItem.link;
                rdesc = thisItem.description;


                var descArr:Array = rdesc.split("src=");
                var resArr:Array = descArr[1].split(".jpg");
                var resArr2:Array = resArr[0].split("\"");
                rimage = resArr2[1] + ".jpg";

}


        ]]>

    </fx:Script>
    <fx:Declarations>
        <s:CallResponder id="getDataResult"/>
        <rssreader:Rssreader id="rssreader"/>


    </fx:Declarations>
    <s:navigationContent>
        <s:Button label="Nazaj" click="navigator.popView()" />
    </s:navigationContent>
    <s:BorderContainer top="0" bottom="0" left="0" right="0"
                       backgroundColor="#FFFFFF">


        <s:Label left="20" right="20" top="42" height="61"
                 backgroundColor="#FFFFFF" color="#000000" fontSize="24"
                 paddingBottom="30" paddingLeft="5" paddingRight="5"
                 paddingTop="5" text="{rtitle}"/>


        <s:Label left="20" right="90" top="14" height="23" backgroundColor="#FEFDFD" color="#666666"
                 fontSize="18" fontStyle="italic" paddingBottom="5" paddingLeft="5" paddingRight="5"
                 paddingTop="5" text="Objavljeno: {rdate}"/>

        <s:BitmapImage y="110" left="20" right="20" smooth="true" smoothingQuality="high"
                       source="{rimage}" />

        <s:Label left="20" right="20" top="264" bottom="135" color="#666666"
                 backgroundColor="#FFFFFF" fontSize="18" paddingBottom="5"
                 paddingLeft="5" paddingRight="5" paddingTop="15"
                 text="{rdesc2}" maxDisplayedLines="10" />

        <s:Button left="50" right="50" bottom="22" label="Preberi celoten članek"
                  click="navigator.pushView(ClanekHTML, data.link)"/>







    </s:BorderContainer>

</s:View>

Ou，这是来自rimage所在的DetailsView.mxml的代码：

谢谢你的帮助！

Answer 1

请记住，在运行时解析的路径(如果作为相对路径给出)将相对于swf/apk执行位置。如果您的图像位于代码所在的包中，那么当您构建时，它将在该包结构中结束，但是MXML将全部编译为输出文件夹的根目录下的swf。我建议创建一个单独的包，将其称为资源，将其作为源文件夹包含在flex构建路径中，在其中创建一个图像文件夹，并将您的图像放入其中，以便将它们与源代码分开。使用与您在构建路径选项中作为源目录包含的资源文件夹相关的路径(如果您不知道如何将该文件夹添加为源文件夹，请右键单击项目，转到属性，转到flex build path，单击源选项卡并将其添加到那里)。在上面的"renderer“视图的代码中，将"images/”添加到字符串的开头，如下所示

如果我完全漏掉了这个问题，或者我解释错了你写的东西，请告诉我。看起来你的绑定已经很好了。