【教程】定制下拉列表选中时的样式

导读：
　　The mouse-hover and selection boxes in a Flex TileList only have styles for changing the colors. If you want more advanced things like changing the shape or having a border you'll need to extend the TileList class and override two methods.

一般的下拉列表对选中时的样式的支持不是很完善，要想得到理想的效果其实也不难，在基类的基础上稍加修改就可以了，可以参照下面的代码，效果图也很理想。
　　drawSelectionIndicator- Draws the box around the currently selected item.
　　drawHighlightIndicator- Draws the box for the mouse-over item
　　public class RoundedSelectionTileList extends TileList
　　{
　　public function RoundedSelectionTileList()
　　{
　　super();
　　}
　　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(0x3f4c6b);
　　g.lineStyle(2,0x6e7c9d);
　　g.drawRoundRect(x,y,itemRenderer.width,height,15,15);
　　g.endFill();
　　}
　　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(0x3f4c6b);
　　g.lineStyle(2,0x6e7c9d);
　　g.drawRoundRect(x,y,itemRenderer.width,height,15,15);
　　g.endFill();
　　}
　　}
　　Before:
　　
　　
　　
　　After:
　　While you're in there, take a look at the other draw* protected methods. You can change most aspects of the control with those.

本文转自
http://www.rogue-development.com/blog/2007/12/customizing-tilelist-selection.html