Flex RadioButton 分組使用repeater

原創

2020-02-20 21:16

需求是這樣的，需要批處理一些信息條目，每條信息有相應的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>
示例如下圖