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>

哦，这是rimage所在的DetailsView.mxml中的代码：

谢谢你的帮助！

Answer 1

我认为从您的描述来看，rImage的路径错误。 请记住，在运行时解析的路径（如果作为相对路径给出）将相对于swf / apk执行位置。 如果将图像放在代码所在的包中，则在构建时它将最终以该包结构结尾，但是MXML将全部编译为位于输出文件夹根目录下的swf。 我建议创建一个单独的程序包，将其称为资源，将其作为源文件夹包含在flex构建路径中，在其中创建图像文件夹，然后将图像放入其中，以使它们与源代码分开。 使用相对于您在构建路径选项中作为源目录包括的资源文件夹的路径（如果您不知道如何将该文件夹添加为源文件夹，请在项目上单击鼠标右键，转到属性，进入flex build路径，点击“来源”标签，然后将其添加到此处）。 在上方“渲染器”视图的代码中，将“ images /”添加到字符串的开头，例如

rimage =“ images /” + resArr2 [1] +“。jpg”;

让我知道我是否完全错过了这个问题，或者是在解释您写错了什么。 看起来您具有约束力，因为它很好。