Feathers:radio

原文地址:http://wiki.starling-framework.org/feathers/radio

如何使用Feathers单选框组件

单选框组件 其实是一个 按钮 组件， 它用额外代码来处理和管理被选择的那个按钮。而这个按钮只是在ToggleGroup中的一组单选按钮集合当中的一个。

通常来说，对于一个有皮肤的单选框组件是没有背景（或者透明的一个背景），而且它的触摸状态是由一个图标皮肤来显示。更多关于用到单选框上的可用皮肤项的详细信息，请查看 How to use the Button component.

使用 ToggleGroup

如果没有提供ToggleGroup，一个单选框则会自动地添加自身到Radio.defaultToggleGroup。通常，尽管如此，你应该创建一个ToggleGroup来区分其他的单选框集合。

var group:ToggleGroup = new ToggleGroup();
 
var radio1:Radio = new Radio();
radio1.label = "One";
radio1.toggleGroup = group;
this.addChild( radio1 );
 
var radio2:Radio = new Radio();
radio2.label = "One";
radio2.toggleGroup = group;
this.addChild( radio2 );
 
var radio3:Radio = new Radio();
radio3.label = "One";
radio3.toggleGroup = group;
this.addChild( radio3 );

简单的传ToggleGroup实例给一个单选框实例的toggleGroup属性

监听Event.CHANGE事件来判断已选单选框发生了变化。

group.addEventListener( Event.CHANGE, group_changeHandler );

监听器可能像这样:

function group_changeHandler( event:Event ):void
{
    var group:ToggleGroup = ToggleGroup( event.currentTarget );
    trace( "group.selectedIndex:", group.selectedIndex );
}

用selectedIndex属性来获取当前选择的单选框的索引（基于这些单选框被添加到toggleGroup的先后顺序）。选择项会直接指向当前已选单选框：

var radio:Radio = Radio( group.selectedItem );
trace( "radio.label:", radio.label );

用户体验 =

通常来说，单选框控件集用于有3或更多的用户定制的选择项。如果只有2个选择项，Check或ToggleSwitch可能更适合。如果有许许多多的的选择项的话，单选框集合可能会占据屏幕上大量有用的空间，那么PickerList可能是一个更好的选择。一个PickerList的默认项渲染，也是Button的一个子类，因此如果你喜欢的话，尽可能样式化列表风格，以至于其看起来更像单选框集合。

Related Links

• How to use the Feathers Button component
• Radio API Documentation
• ToggleGroup API Documentation
• Button API Documentation

For more tutorials, return to the Feathers Documentation.

---

翻译者：郭必江