Feathers:header

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

如何使用 Feathers Header 组件

Header 组件包含一个标题（可有可无）和左右两侧的包含其他控件的区域 (通常是按钮导航).

基础

让我们开始创建一个带有标题的header.

var header:Header = new Header();
header.title = "Settings";
this.addChild( header );

接下来我们在 left items 区域添加一个返回按钮.

var button:Button = new Button();
button.label = "Back";
button.addEventListener( Event.TRIGGERED, backButton_triggeredHandler );
 
header.leftItems = new <DisplayObject>[ backButton ];

注意，我们创建的按钮就像其他任何普通按钮一样, 包括添加一个事件监听器, 只是我们没有把它添加到显示列表. 我们将按钮放到Vector.<DisplayObject>中，然后传给 leftItems 属性，由header来管理添加按钮为子对象和按钮在header中的布局.

如果需要的话，我们可以添加另外的按钮或控件到 [items] 区域.

设置Header的皮肤

header有 backgroundSkin 和 backgroundDisabledSkin. 如果header被禁用, backgroundDisabledSkin 会被使用. 然而, 如果没有提供 backgroundDisabledSkin, header 将会退回到 backgroundSkin.

header.backgroundSkin = new Scale9Image( textures );

背景会进行拉伸以填充整个header的宽和高.

header的标题默认居中显示. TITLE_ALIGN_PREFER_LEFT 会使标题向左对齐（当且仅当左侧没有任何组件时），TITLE_ALIGN_PREFER_RIGHT 会使标题向右对齐（当且仅当右侧没有任何组件时）.

在这种情况下, 我们在右侧没有任何组件, 所以我们可以向右对齐标题, 如果我们需要的话:

header.titleAlign = Header.TITLE_ALIGN_PREFER_RIGHT;

和许多 Feathers 组件一样, Header 提供了gap 和 padding 用来布局.

header.gap = 10;
header.paddingTop = 15;
header.paddingRight = 20;
header.paddingBottom = 15;
header.paddingLeft = 20;

相关链接

• Header API Documentation

For more tutorials, return to the Feathers Documentation.

---

翻译者：王庆