Question

我正在使用一个组件，目前有一个数据提供者正在工作ArrayCollection（有一个单独的问题，关于如何使这个XML文件...但我离题了。）

变量声明如下所示：

[Bindable]
private var _dpImageList : ArrayCollection = new ArrayCollection([
    {"location" : "path/to/image1.jpg"},
    {"location" : "path/to/image2.jpg"},
    {"location" : "path/to/image3.jpg"}
]);

我接着这样说：

<s:List
    id="lstImages"
    width="100%"
    dataProvider="{_dpImageList}"
    itemRenderer="path.to.render.ImageRenderer"
    skinClass="path.to.skins.ListSkin"
    >
    <s:layout>
        <s:HorizontalLayout gap="2" />
    </s:layout>
</s:List>

目前，似乎每个项目都是异步处理的。

但是，我希望它们能够同步处理。

原因：我正在显示图像列表，我希望最左边的图像首先渲染，然后是右边的渲染，依此类推。

编辑：

我刚发现这个answer 你认为这可能是同一个问题吗？

Answer 1

声明两个集合，而不是声明变量并将其用作绑定源。然后，onCreationComplete调用loadNext（），它将一个对象移出第二个数组并将其推入第一个数组。当项目被渲染（由itemRenderer调度并捕获自定义事件）时，再次调用loadNext（），直到源数组为空并且绑定的dataProvider包含所有图像为止。

如果没有任何意义，我可以在代码中编写它。 ;）

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" creationComplete="init()">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var _source : ArrayCollection = new ArrayCollection([
                {"location" : "path/to/image1.jpg"},
                {"location" : "path/to/image2.jpg"},
                {"location" : "path/to/image3.jpg"}
            ]);         

            [Bindable] private var dataProvider:ArrayCollection;

            protected function init():void
            {
                this.lstImages.addEventListener( "imageLoaded", handleImageLoaded);
                loadImage()
            }

            protected function loadImage():void
            {
                if(this._source.length<=0)
                    return;
                var image:Object = this._source.getItemAt(0);
                dataProvider.addItem(image);
                this._source.removeItemAt(0);
            }

            protected function handleImageLoaded(event:Event):void
            {
                loadImage()
            }
        ]]>
    </fx:Script>
    <s:List
        id="lstImages"
        width="100%"
        dataProvider="{_dpImageList}"
        itemRenderer="path.to.render.ImageRenderer"
        skinClass="path.to.skins.ListSkin"
        >
        <s:layout>
            <s:HorizontalLayout gap="2" />
        </s:layout>
    </s:List>
</s:Application>

您的项目渲染器图像的完整句柄将发送：

protected function handleImageLoaded(event:Event):void
{
    owner.dispatch(new Event("imageLoaded"));
}

这应该以干净的顺序加载你的图像。

如何确保Flex dataProvider同步处理数据？

编辑：

1 个答案: