構建高級用戶界面 使用 Repeater 組件

使用 Repeater 組件(Repeater component)

Repeater 組件用於重複製作一些簡單用戶界面組件。如按鈕控制項和其他在窗體容器中通常使用的控制項。例如他與我們常見的FOR循環類似。

通常,您控制重複使用數組的動態數據,例如從 Web 服務返回的 Array 對象,您可以使用靜態數組模擬簡單的循環。

你可以使用 <mx:Repeater> 標簽聲明一個 Repeater 組建 ,在運行時中重複一個或多個用戶界面組件。重複的組件可以是控制項或容器。使用 Repeater 組件需要便於運行時特定值的數據綁定。

通常你可以將<mx:Repeater> 標籤用於能使用控制或容器標籤的任何地方。若要重複用戶界面組件,你只需將他們放置在<mx:Repeater>內即可。除了<mx:Application>容器標籤以外,所有源於UI組建類的組建都可以被重複。

你還可以在MXML里使用多個<mx:Repeater>標籤和嵌套<mx:Repeater>標籤。雖然Repeater組件看起來是您的代碼中的容器,但是他們只是不具備自動布局功能的容器。

例如,以下代碼段創建多個 RadioButton 控制項根據產品的 ArrayCollection,每個包含名稱屬性。 容器的布局屬性設定為"水平"使 RadioButton 控制項顯示排列在一行中。

<mx:Panel layout="horizontal">

<mx:Repeater id="productsRepeater" dataProvider="{productsAC}">
<mx:RadioButton id="buttonsArray"
label="{productsRepeater.currentItem.name}"

data="{productsRepeater.currentItem}"
/>
</mx:Repeater>
</mx:Panel>

使用 Repeater 模擬FOR循環

最簡單的重複結構可以創建Repeater 組件是靜態的循環,設定執行的次數。

Repeater 組件在下面的示例模擬一個簡單的循環,執行四次列印簡單的一行文本,每次遞增計數器。

代碼

<?xml version="1.0" Encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/RepeaterStatic/index.html"
width="275" height="200"

>
<mx:Script>
<![CDATA[
[Bindable]
public var myArray:Array=[1,2,3,4];
]]>

</mx:Script>
<mx:Panel
title="Repeater: emulating a for loop"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"

>
<mx:Repeater id="myRep" dataProvider="{myArray}">
<mx:Label
id="myLabel"
text="This is loop #{myRep.currentIndex}"

/>
</mx:Repeater>
</mx:Panel>
</mx:Application>

提示:重構數組聲明

public var myArray:Array=[,,,,]; // The actual values do not matter in this use-case

結果

(圖)結果結果

相關詞條

熱門詞條

聯絡我們