Flex中列表爲空時顯示的背景圖像

Question

List爲空時，如何在List上顯示backgroundImage？

目前，在拖放項目後拖放內容時填充列表，但我更傾向於檢查數據的任何更改以確定列表是否爲空的解決方案。

List從它的ScrollControlBase繼承backgroundImage，但什麼是最好的方式使它出現在列表爲空並且在添加項目時消失。

有什麼建議嗎？

謝謝！

Answer 1

在過去，我已經完成了一個組件的狀態。快速和骯髒的例子是這樣的事情在你的自定義組件：

<mx:List currentState="{(listItemsDataProvider.length > 0) ? 'HasItemsState' : 'NoItemsState'}">

// anything else you need

</mx:List>

當然在組件中產生的狀態，並與NoItemsStates更改背景圖片，或者如果你的組件是一個容器，如Canvas，那麼你可以讓狀態根本不顯示List。

Answer 2

使用相同的屬性，當您有一些數據時將圖像設置爲null。您也可以看看自定義ItemRenderers。

Answer 3

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 

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

      private function removeAllItemsFromList():void 
      { 
       this.listItems.removeAll(); 
       backgroundCheck() 
      } 

      private function addItemToList():void 
      { 
       this.listItems.addItem({data:null,label:"test"}); 
       backgroundCheck() 
      } 

      private function backgroundCheck():void 
      { 
       if(this.listItems.length>0) 
       { 
        this.myList.setStyle("backgroundImage", null) 
       } 
       else 
       { 
        this.myList.setStyle("backgroundImage", "me.png") 
       }    
      } 
     ]]> 
    </mx:Script> 
    <mx:VBox width="100%" height="100%"> 
     <mx:List id="myList" width="100%" height="100%" backgroundImage="me.png" dataProvider="{this.listItems}"/> 
     <mx:HBox width="100%"> 
      <mx:Button id="addItemButton" click="addItemToList()" label="add item"/> 
      <mx:Button id="removeItemsButton" click="removeAllItemsFromList()" label="remove all items"/> 
     </mx:HBox> 
    </mx:VBox> 
</mx:Application> 

這是我如何處理它，檢查dataProvider的長度。在你的情況下，你會這樣做，當下降完成。

Answer 4

您可以擴展List控件並覆蓋updateDisplayList（）。如果dataProvider.length == 0，則繪製backgroundImage，否則調用super.updateDisplayList（）以獲得正常的List行爲。如果需要，這將使新的List控件易於重用。