Flex中TileList自定义间距和theme样式

使用过TileList的朋友可能知道，该组件没有Item与Item之间的间距设置。而且theme也没有办法象linkbar那样设置样式corner-radius改变形状。唯一的解决办法就是重写TileList组件中drawSelectionIndicator 和drawHighlightIndicator 。

 

/** * Author Dante * Email:[email protected] * CreatedTime:2009.04.13 * Description: * 该组件实现选中和划过theme样式，并且添加间距 * **/ package myLib { import flash.display.Graphics; import flash.display.Sprite; import mx.controls.TileList; import mx.controls.listClasses.IListItemRenderer; public class MyTileList extends TileList { [Bindable] private var _verticalGap:Number = 0; [Bindable] private var _horizontalGap:Number = 0; public function MyTileList() { super(); } /** * 重写鼠标划过高亮 * @indicator:Sprite * @x:Number * @y:Number * @width:Number * @height:Number * @color:uint * @itemRenderer:IListItemRenderer * return void * **/ override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void { //绘图 var g:Graphics = indicator.graphics; g.clear(); g.beginFill(color); //画椭圆 g.drawEllipse(0, 0, width - _horizontalGap, height - _verticalGap); g.endFill(); indicator.x = x; indicator.y = y; } /** * 重写选中高亮 * @indicator:Sprite * @x:Number * @y:Number * @width:Number * @height:Number * @color:uint * @itemRenderer:IListItemRenderer * return void * **/ override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void { //绘图 var g:Graphics = indicator.graphics; g.clear(); g.beginFill(color); //画椭圆 g.drawEllipse(0, 0, width - _horizontalGap, height - _verticalGap); g.endFill(); indicator.x = x; indicator.y = y; } //============================= // set and get //============================= public function set verticalGap(value:Number):void { _verticalGap = value; } public function get verticalGap():Number { return _verticalGap; } public function set horizontalGap(value:Number):void { _horizontalGap = value; } public function get horizontalGap():Number { return _horizontalGap; } } }