TileList组件
TileList 类提供呈行和列分布的网格,通常用来以“平铺”格式设置并显示图像。 用于此组件的默认单元格渲染器为 ImageCell 类。 ImageCell 单元格渲染器将显示缩略图图像和一个单行标签。 若要呈现 TileList组件中基于列表的单元格,请使用 CellRenderer 类。
若要修改分隔图像单元格边框的填充,可以通过全局方式设置 imagePadding
样式,或者在 ImageCell 类上设置该样式。 与其它单元格样式一样,imagePadding
样式无法在 TileList 组件实例上进行设置。下面我做了一个小例子,把几张图片加到TileList列表内,用到了TileList的ListEvent.itemClick事件。用鼠标在列表内指着哪个,右边就会把指住的图片放大;代码如下:
package { import flash.display.Sprite; import fl.controls.TileList; import fl.data.DataProvider; import fl.containers.UILoader; import fl.controls.ScrollBarDirection; import fl.events.ListEvent; import flash.events.MouseEvent; public class Main extends Sprite { private var myTileList:TileList = new TileList(); private var dp:DataProvider = new DataProvider(); private var myUILoader:UILoader = new UILoader(); public function Main() { dp.addItem({label:"Image 1", source:"images/01.jpg"}); dp.addItem({label:"Image 2", source:"images/02.jpg"}); dp.addItem({label:"Image 3", source:"images/03.jpg"}); dp.addItem({label:"Image 4", source:"images/04.jpg"}); dp.addItem({label:"Image 5", source:"images/05.jpg"}); dp.addItem({label:"Image 6", source:"images/06.jpg"}); dp.addItem({label:"Image 7", source:"images/07.jpg"}); myTileList.direction = ScrollBarDirection.VERTICAL; myUILoader.autoLoad = false; myUILoader.scaleContent = true; myUILoader.width = 500; myUILoader.height = 350; myUILoader.move(100, 25); addChild(myUILoader); myTileList.dataProvider = dp; myTileList.columnWidth = 80; myTileList.rowHeight = 80; myTileList.columnCount = 1; myTileList.rowCount = 5; myTileList.move(2, 0); addChild(myTileList); myTileList.addEventListener(ListEvent.ITEM_ROLL_OVER ,onChangeHandler); } private function onChangeHandler(e:ListEvent):void { myUILoader.source = e.item.source; myUILoader.load(); } } }