Feathers:list
原文地址：http://wiki.starling-framework.org/feathers/list
目录 |
如何使用 Feathers 列表组件
List 从类似Array 或 Vector的平面数据来源渲染一系列的子项，包括对 选择子项， 滚动列表， 自定义布局， 虚拟化布局，和自定义子项渲染器的支持.
基础
让我们以创建列表控件开始:
var list:List = new List(); list.width = 250; list.height = 300; this.addChild( list );
接下来, 我们希望列表显示一些子项, 所以我们创建一个 ListCollection 来做为列表的数据源. 在下面的例子中, 一个包含对象的Array被传给ListCollection.
var groceryList:ListCollection = new ListCollection( [ { text: "Milk", thumbnail: textureAtlas.getTexture( "milk" ) }, { text: "Eggs", thumbnail: textureAtlas.getTexture( "eggs" ) }, { text: "Bread", thumbnail: textureAtlas.getTexture( "bread" ) }, { text: "Chicken", thumbnail: textureAtlas.getTexture( "chicken" ) }, ]); list.dataProvider = groceryList;
ListCollection 封装了任意类型的数据用来提供一种通用的列表组件可以理解的API. 目前, ListCollection 自动支持 Vector, Array, 和 XMLList, 但如果需要的话，你可以创建 _data descriptors_来使用其他类型的数据.
现在, 我们需要告诉列表如何显示数据，更确切的说，我们需要告诉子项渲染器如何显示数据. 默认的子项渲染器有很多选择来显示 文本，图片，和其他显示对象，这里，我们将告诉它使用子项们的text 属性和thumbnail属性.
list.itemRendererProperties.labelField = "text"; list.itemRendererProperties.iconTextureField = "thumbnail";
当使用 [1]时,默认的子项渲染器会自动创建一个合适的文本渲染器来显示文本标签. 类似的, 当你使用 iconTextureField时, 子项渲染器将自动创建和管理一个 Image 来显示纹理. 请阅读有关DefaultListItemRenderer 类的文档来了解所有可用的各种类型。我们很快会看到更多关于渲染器的详细信息。
使用默认的子项渲染器
列表组件默认的子项渲染器是 Button的子类, 所以所有buttons能用的皮肤和布局选项也都能被渲染器使用. 例如, 你可能希望列表内容水平居中或者垂直居中，在最上方显示一个图标，给子项之间添加一个间隙，等等:
list.itemRendererProperties.horizontalAlign = Button.HORIZONTAL_ALIGN_CENTER; list.itemRendererProperties.verticalAlign = Button.VERTICAL_ALIGN_MIDDLE; list.itemRendererProperties.iconPosition = Button.ICON_POSITION_TOP; list.itemRendererProperties.gap = 10;
同样就像按钮一样, 默认的子项渲染器也有不同的点击状态，像按下和悬停. 你可以在Getting Started with Feathers 教程里查看如何自定义不同状态下的皮肤.
Accessories
除了标签和图标, 默认的子项渲染器还可以显示一个 //accessory// 界面. 这是一个额外的显示对象，往往以某种方式交互. 例如, 你可能在左侧创建一个有标签的设置列表，在右侧创建一些像滑块和切换开关的用户界面控件.
一个accessory可能是一个标签, 一张图片, 或者其他任意Starling显示对象, 包括 Feathers 组件. 像你使用labelField 从子项访问 text 一样, 你可以使用 accessoryLabelField 来显示第二个标签. 默认的子项渲染器同样有一个和 iconTextureField类似的 accessoryTextureField. 当你想要 accessory 显示文本或者图片时，这两个将会是最好的方法. 如果你需要显示一个 UI 控件或者其他任意显示对象, 使用 accessoryField 属性.
Components Explorer example 在设置界面使用accessories来显示几个Feathers组件.
自定义子项渲染器
如果默认的子项渲染器没有你想要的功能, 可以使用 custom item renderers 代替. 自定义子项渲渲染器必须实现 IListItemRenderer 接口. 他们同样必须是 FeathersControl的子类.
关于子项渲染器的全部细节, 请参阅 Creating Custom Item Renderers.
传入一个子项渲染器的最简单方法是设置 itemRendererType 属性:
list.itemRendererType = ExampleCustomItemRenderer;
有时, 当子项渲染器创建时你可能想要改变一些属性. 例如, 如果你没有使用 theme, 当你创建渲染器的时候你需要传入皮肤. 在这种情况下, 你可以使用 itemRendererFactory 属性来代替 itemRendererType:
list.itemRendererFactory = function():IListItemRenderer { var renderer:DefaultListItemRenderer = new DefaultListItemRenderer(); renderer.defaultSkin = new Image( texture ); renderer.defaultLabelProperties.textFormat = new BitmapFontTextFormat( font ); return renderer; }
在上面的例子中, 我们为一个 List 组件创造了默认的子项渲染器, 同时我们传入了一个皮肤和一个文本格式.
布局
列表默认的布局是在垂直方向一个接一个的显示子项. 我们可以改为水平的布局, 平铺的布局, 甚至是一个完全自定义的实现 ILayout 接口的算法. 让我们切换到 HorizontalLayout 并且稍稍改动一下:
var layout:HorizontalLayout = new HorizontalLayout(); layout.verticalAlign = HorizontalLayout.VERTICAL_ALIGN_JUSTIFY; layout.gap = 10; layout.paddingTop = layout.paddingRight = layout.paddingBottom = layout.paddingLeft = 15; list.layout = layout;
当列表自动默认为 VerticalLayout时, 它同时禁止了 Scroller子组件的水平滚动，以便 Scroller 的弹性边界只表现在垂直方向. 如果我们要切换到水平布局, 我们还应该适当的调整滚动规则.
list.scrollerProperties.horizontalScrollPolicy = Scroller.SCROLL_POLICY_AUTO; list.scrollerProperties.verticalScrollPolicy = Scroller.SCROLL_POLICY_OFF;
选择某个子项
List 可能有一个选定的子项. 你可以通过 selectedIndex 和 selectedItem 属性访问选择子项的相关信息. 如果不能选择子项, selectedIndex 的值将会是 -1，selectedItem 的值将会是null.
通过监听Event.CHANGE 事件来监听子项选择的变化:
list.addEventListener( Event.CHANGE, list_changeHandler );
监听器可能看起来会是这样:
private function list_changeHandler( event:Event ):void { var list:List = List( event.currentTarget ); trace( "selectedIndex:", list.selectedIndex ); }
设置 isSelected 为 false来禁止选择子项.
相关链接
For more tutorials, return to the Feathers Documentation.
翻译者：王庆
