Flex：加载时绑定到空ArrayCollection的组件在更新ArrayCollection时不会按预期呈现

Question

我是Flex的新手，并且正在使用绑定到ArrayCollection的TileList。数组集合在加载时为空，然后使用来自HTTPService调用的结果进行更新。问题是项目渲染器没有按预期渲染，我猜是因为在加载时首次渲染时没有数据。这是简化的例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

  <mx:Script>
    <![CDATA[

      import mx.collections.ArrayCollection;

      [Bindable]
      public var myList1:ArrayCollection = new ArrayCollection();

      [Bindable]
      public var myList2:ArrayCollection = new ArrayCollection([{item:"foo"}, {item:"bar"}]);

      public function updateMyList():void
      {
          myList1.source = [{item:"foo"}, {item:"bar"}];
      }

    ]]>
  </mx:Script>

<mx:Button id="myButton" label="Update My List"
           click="updateMyList();"/>


  <mx:TileList dataProvider="{myList1}"
           direction="vertical"
           width="800" >

    <mx:itemRenderer>

      <mx:Component >

    <mx:Canvas backgroundColor="yellow" >
      <mx:Label text="{data.item}" width="800"  />
    </mx:Canvas>

      </mx:Component>

    </mx:itemRenderer>

  </mx:TileList>


<!-- This one renders as expected  -->

  <mx:TileList dataProvider="{myList2}"
           direction="vertical"
           width="800" >

    <mx:itemRenderer>

      <mx:Component >

    <mx:Canvas backgroundColor="yellow" >
      <mx:Label text="{data.item}" width="800"  />
    </mx:Canvas>

      </mx:Component>

    </mx:itemRenderer>

  </mx:TileList>

</mx:Application>

您会注意到第二个TileList的绑定在加载时具有数据呈现为预期（800px宽），第一个TileList呈现的位不是正确的宽度并且在其周围有滚动条。

有人可以解释为什么会发生这种情况，甚至提供一些解决方法来避免这种情况吗？

此致

克里斯

Answer 1

这部分可能会导致问题：

public function updateMyList():void
          {
              myList1.source = [{item:"foo"}, {item:"bar"}];
          }

从此处：

  

ArrayCollection中的数据源。   ArrayCollection对象没有   表示您所做的任何更改   直接到源数组。总是   使用ICollectionView或IList   修改集合的方法。

     

此属性可用作   数据绑定的来源。当这个   财产被修改，它发送   listChanged事件。

所以我可能会改行：

myList1 = new ArrayCollection（[{item：＆quot; foo＆quot;}，{item：＆quot; bar＆quot;}]）;

Answer 2

http://livedocs.adobe.com/flex /3/langref/mx/controls/TileList.html 检查API。

像这样设置columnWidth和rowHeight属性，

  <mx:TileList dataProvider="{myList1}"
                   direction="vertical"
                   width="800" columnWidth="800" rowHeight="25">

可能还有更多“适当”的东西。这样做的方法，但这应该让你开始。