Flex中利用Repeater显示一组RadioButton控件的例子

接下来的例子演示了Flex中如何Repeater作为一个数据提供源，用来显示一组RadioButton控件。

让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

 

下面是完整代码(或 点击这里查看)：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Style>
8.         Alert {
9.             backgroundAlpha: 0.8;
10.             backgroundColor: black;
11.             borderAlpha: 0.8;
12.             borderColor: black;
13.         }
14.     </mx:Style>
16.     <mx:Script>
17.         <![CDATA[
18.             import mx.controls.Alert;
19.             import mx.controls.RadioButton;
21.             private function radioButton_change(evt:Event):void {
22.                 var radio:RadioButton = RadioButton(evt.currentTarget);
23.                 var item:Object = radio.getRepeaterItem();
24.                 var cssObj:CSSStyleDeclaration;
25.                 cssObj = StyleManager.getStyleDeclaration("Alert");
26.                 cssObj.setStyle("modalTransparencyColor", item.data);
27.                 cssObj.setStyle("themeColor", item.data);
28.                 Alert.show(item.label, "getRepeaterItem()");
29.             }
30.         ]]>
31.     </mx:Script>
33.     <mx:Array id="arr">
34.         <mx:Object label="Red" data="red" />
35.         <mx:Object label="Orange" data="haloOrange" />
36.         <mx:Object label="Yellow" data="yellow" />
37.         <mx:Object label="Green" data="haloGreen" />
38.         <mx:Object label="Blue" data="haloBlue" />
39.     </mx:Array>
41.     <mx:ApplicationControlBar dock="true">
42.         <mx:Form styleName="plain">
43.             <mx:FormItem label="selectedValue:">
44.                 <mx:Label text="{radioGroup.selectedValue}" />
45.             </mx:FormItem>
46.         </mx:Form>
47.     </mx:ApplicationControlBar>
49.     <mx:HBox id="hb" horizontalGap="60">
50.         <mx:RadioButtonGroup id="radioGroup" />
51.         <mx:Repeater id="radioRepeater"
52.                 dataProvider="{arr}">
53.             <mx:RadioButton id="radioButtons"
54.                     label="{radioRepeater.currentItem.label}"
55.                     group="{radioGroup}"
56.                     change="radioButton_change(event);" />
57.         </mx:Repeater>
58.     </mx:HBox>
60. </mx:Application>