Feathers:button-group

原文地址：http://wiki.starling-framework.org/feathers/button-group

如何使用 Feathers ButtonGroup组件

ButtonGroup 在一个简单的水平或者垂直布局中一个接一个的显示一组 buttons . 如果有一组相关的按钮具有相同的外观，并且想有意义的显示在一起，那么就需要用到ButtonGroup组件. 例如, 警告弹出窗口用ButtonGroup 显示它的OK/Cancel/Yes/No等按钮.

基础

首先, 让我们创建一个 ButtonGroup 组件，并添加到显示列表:

var group:ButtonGroup = new ButtonGroup();
this.addChild(group);

这将不会显示任何东西，因为我们还没有提供我们想要的按钮的相关信息给data provider. 我们接下来就要做这一步:

group.dataProvider = new ListCollection(
[
    { label: "One", triggered: oneButton_triggeredHandler },
    { label: "Two", triggered: twoButton_triggeredHandler },
    { label: "Three", triggered: threeButton_triggeredHandler },
]);

像 List 或者 TabBar 组件一样, ButtonGroup 使用一个 ListCollection 对象作为它的数据提供者.

button group 会自动检测数据列表里的每一个子项的所有属性. 例如, 在上面的代码中我们给每一个按钮设置 label 属性. 每一个按钮的图标状态也可以在这里设置, 添加 isToggle 和 isSelected 可以把按钮变为转换按钮.

另外, 我们可以给每个按钮添加一些事件监听器, 包括 Event.TRIGGERED 和 Event.CHANGE (triggered 和 change 使用 String 值). 在上面的例子中, 我们添加 triggered 事件的监听器， 其中第一个按钮的监听器函数通常是这样:

function oneButton_triggeredHandler( event:Event ):void
{
    var button:Button = Button( event.currentTarget );
    trace( "button triggered:", button.label );
}

皮肤

如果你要创建一个 custom theme, ButtonGroup 里的按钮需要用 ButtonGroup.DEFAULT_CHILD_NAME_BUTTON这个名字来初始化. 如果你想按钮像普通按钮一样，那么你不需要在主题里设置相关的皮肤.

setInitializerForClass( Button, buttonBarButtonInitializer, ButtonGroup.DEFAULT_CHILD_NAME_BUTTON );

如果没有主题, button group里的按钮可以用 buttonFactory 工厂来设置皮肤.

group.buttonFactory = function():Button
{
    var button:Button = new Button();
    button.defaultSkin = new Image( texture );
    button.downSkin = new Image( texture );
    button.defaultLabelProperties.textFormat = new TextFormat("Arial", 24, 0x323232, true );
    return button;
};

布局

ButtonGroup 通过设置 direction 属性来自定义严格的水平或垂直布局. 此外, 你可以设置按钮之间的间隙, 包括设置第一个和最后一个按钮的特殊间隙.

group.direction = ButtonGroup.DIRECTION_VERTICAL;
group.gap = 10;
group.lastGap = 20;

第一个和最后一个按钮的间隙是可选的, 如果它们没有被定义, 默认将会使用普通的 gap 值.

垂直布局下, 每个按钮的宽度都将匹配button group的宽度. 同样的, 水平布局下, 每个按钮的高度都将匹配button group的高度.

第一个和最后一个按钮

除了 firstGap 和 lastGap，你可以选择自定义第一个按钮和最后一个按钮的外观使它们完全不同于其他的按钮.

就像上面的 buttonFactory, 同样有一个 firstButtonFactory 和 lastButtonFactory. 你同样可以通过设置ButtonGroup 的 customFirstButtonName 和 customLastButtonName 属性，从而让主题来渲染这些按钮不同的皮肤. 和 gaps 一样, 所有针对第一个和最后一个按钮的属性都是可选的, 并且如果它们被忽略了, button group 将会使用默认的值.

相关链接

• ButtonGroup API Documentation
• ButtonGroupScreen source code, a simple example in the Components Explorer

For more tutorials, return to the Feathers Documentation.

---

翻译者：王庆