Question

Flex ButtonBar 是怎么实现多个Button同时只选中一个

Answer 1

BttonBar和ToggleButtonBar控件为相关的按钮定义了一个水平或垂直的、具有公共外观的布局。这两个控件只定义了一个叫做itemClick的事件，该事件在控件中任何按钮被选择的时候调度。

ButtonBar控件定义了一个不持有存储状态的按钮组。当你在一个ButtonBar种选择一个按钮的时候，这个按钮的外观改变为选择状态，当释放这个按钮时，它将返回未选择状态。

ToggleButtonBar控件定义了一个维持其选择或未选择状态的按钮组。在ToggleButtonBar控件中，只有以一个按钮可以处于被选择状态。这意味着当你在ToggleButtonBar控件中选择一个按钮时，这个按钮将一直处于被选择状态，直到你选择了另一个按钮。

如果你设置ToggleButtonBar控件的toggleOnClick属性未true，那么再次选择当前已选择的按钮，将使它返回未选择状态。默认情况下toggleOnClick属性为false。

创建一个ButtonBar控件
<</FONT>mx:ButtonBar borderStyle="solid" horizontalGap="5">
<</FONT>mx:dataProvider>
<</FONT>mx:String>Flash</</FONT>mx:String>
<</FONT>mx:String>Director</</FONT>mx:String>
<</FONT>mx:String>Dreamweaver</</FONT>mx:String>
<</FONT>mx:String>ColdFusion</</FONT>mx:String>
</</FONT>mx:dataProvider>
</</FONT>mx:ButtonBar>

要创建一个ToggleButtonBar空间，之需要将标签替换为标签。对于ToggleButtonBar控件，selectedIndex属性块iedomge当控件被创建的时候，哪个按钮处于被选择状态，默认值是0，即使最左侧的按钮处于被选择状态。设置selectedIndex属性为-1将使所有按钮处于未选择状态。dataProvicer属性定义了按钮的标签。你也可以向dataProvider属性传递一个对象数组，其中每个对象可以有三个字段：label,icon和toolTip。

<</FONT>mx:ButtonBar borderStyle="solid" horizontalGap="5">
<</FONT>mx:dataProvider>
<</FONT>mx:Object label="Flash" icon="@Embed(source='../img/feedicon_001.png')"/>
<</FONT>mx:Object label="Director" icon="@Embed(source='../img/feedicon_002.png')"/>
<</FONT>mx:Object label="Dreamweaver" icon="@Embed(source='../img/feedicon_003.png')"/>
<</FONT>mx:Object label="ColdFusion" icon="@Embed(source='../img/feedicon_004.png')"/>
</</FONT>mx:dataProvider>

ButtonBar或ToggleButtonBar控件基于dataProvider属性的值创建按钮。即使ButtonBar和ToggleButtonBar是Container的子类，也不要使用Container.addChild()和Container.removeItem()方法来添加或移除按钮，而应使用addItem()和removeItem方法来操作dataProvider属性。ButtonBar或ToggleButtonBar控件可以自动的根据dataProvider属性的变化添加或移除按钮。

处理ButtonBar事件
当你选择一个按钮的时候，ButtonBar和ToggleButtonBar控件将调度一个itemClick事件。传递给事件监听器的event对象的类型为ItemClickEvent。在事件监听器中，你可以通过访问event对象的属性来确定被选择的按钮和其他信息。第一个按钮的索引是0。

<</FONT>mx:Script>

import mx.events.ItemClickEvent;
private var savedIndex:int = 99999;
private function clickHandler(event:ItemClickEvent):void {
if (event.index == savedIndex) {
myTA.text=""
}
else {
savedIndex = event.index;
myTA.text="Selected button index: " + String(event.index) + "\n" + "Selected button label: " +event.label;
}
}

</</FONT>mx:Script>
<</FONT>mx:ToggleButtonBar
borderStyle="solid"
horizontalGap="5"
itemClick="clickHandler(event);"
toggleOnClick="true"
selectedIndex="-1">
<</FONT>mx:dataProvider>
<</FONT>mx:String>Flash</</FONT>mx:String>
<</FONT>mx:String>Director</</FONT>mx:String>
<</FONT>mx:String>Dreamweaver</</FONT>mx:String>
<</FONT>mx:String>ColdFusion</</FONT>mx:String>
</</FONT>mx:dataProvider>
</</FONT>mx:ToggleButtonBar>
<</FONT>mx:TextArea id="myTA" width="250" height="100"/>