Flex RadioButton 分组使用repeater

需求是这样的，需要批处理一些信息条目，每条信息有相应的radiobutton，选是还是否操作。由于要求的样式比较花俏，用datagrid无法满足，就考虑用repeater来做。关于radiobutton的样式，能想到的如下（每组radiobutton点选互不影响）：

<mx:HBox>
 <mx:RadioButtonGroup id="group"/>
<mx:RadioButton group="group" id="yes"/>
<mx:RadioButton group="group" id="no"/>
</mx:HBox>

定义一个群组id，单个radiobutton指定群组id，而后用repeater组件进行循环。对于一般组件，如Label、Text等，定义了id进行repeater是不会出问题的，但是对于RadioButtonGroup ，会报如下错误：

 Unable to generate initialization code within Repeater, due to id or data binding on a component that is not a visual child.

在网上搜索了一下，对于radiobutton使用repeater的人，都有这个疑惑，后来总算在英文网站是找了一个解决办法，如下文：

http://www.jonathanrowny.com/journal/radiobuttongroup-inside-repeater

原理是根据数据源大小生成一个radiobuttongroup数组，而后repeater的时候，根据repeater的index从该数组中取相应的group绑定到radiobutton，实现radiobutton各组操作分离，互不影响。

在此基础上，做了一个扩展实例，模拟演示，可以初始得到每组radiobutton的初始值，以及点击时，可以分别得到每组radiobutton的值。

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"><mx:Script><![CDATA[import mx.controls.Alert;import mx.controls.RadioButtonGroup;import mx.controls.RadioButton;import mx.controls.Label;import mx.collections.ArrayCollection;[Bindable]private var rbGroups:ArrayCollection;[Bindable]public var myArray:Array=[{男: "yes", 女: "no"}, {男: "yes", 女: "no"}, {男: "no", 女: "yes"}, {男: "no", 女: "yes"}];/** * 通过数组初始值，判断选择。 */private function isSelect(item:Object):Boolean{if (item.男 == "yes"){return true;}else{return false;}}/** * 根据数据源建立一个radiobuttongroup组 */private function createRBGroups():void{rbGroups=new ArrayCollection();var rbGroup:RadioButtonGroup;for each (var item:Object in someRepeater.dataProvider as ArrayCollection){rbGroup=new RadioButtonGroup();rbGroups.addItem(rbGroup);}}/** * 单击某组radiobutton，显示相应值 */private function showSex(event:Event):void{var radio:RadioButton=event.currentTarget as RadioButton;event.currentTarget.parent.parent.getChildByName("sexShow").text="This is a " + radio.label;}/** * 单击某组radiobutton，显示相应值 */private function showDefault(item:Object):String{if (item.男 == "yes"){return "男";}else{return "女";}}]]></mx:Script><mx:Panel width="100%"  height="500"><mx:Repeater repeatStart="createRBGroups()" id="someRepeater" dataProvider="{myArray}"><mx:VBox><mx:HBox><mx:RadioButton id="male"group="{RadioButtonGroup(rbGroups.getItemAt(someRepeater.currentIndex))}"label="男"selected="{isSelect(someRepeater.currentItem)}"click="{showSex(event)}"/><mx:RadioButton id="female"group="{RadioButtonGroup(rbGroups.getItemAt(someRepeater.currentIndex))}"label="女"selected="{!isSelect(someRepeater.currentItem)}"click="{showSex(event)}"/></mx:HBox><mx:Label id="sexShow"  width="120" text="This is a {showDefault(someRepeater.currentItem)}"/></mx:VBox>                           <mx:HRule width="100%"/></mx:Repeater></mx:Panel></mx:Application>

示例如下图