Это как раз тот момент, когда я понял, насколько сложными могут быть некоторые простые вещи во Flex. :)
Существуют различные способы решения такой проблемы, как эта, в зависимости от того, к какому эффекту вы стремитесь, но я всегда делал это сначала путем переопределения определенных функций TileList, а затем с помощью пользовательских itemRenderers. (Мне никогда не удавалось выяснить, как рисовать графический объект Списка на верху визуализированного содержимого - хотя кто-то другой мог бы пролить свет на это.)
Например, я обычно создаю новый класс, который расширяет TileList, затем переопределяю методы, отвечающие за отрисовку индикаторов выделения и выделения, чтобы получить немного больше контроля над тем, как эти функции рисуют индикаторы (или иногда я буду просто закомментируйте их содержимое, чтобы ничего не отображалось):
public class MyCustomTileList extends TileList
{
public function MyCustomTileList()
{
super();
}
override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(getStyle("myRolloverColor"), getStyle("myRolloverAlpha"));
g.drawRect(1, 1, width - 1, height - 1);
g.endFill();
indicator.x = x;
indicator.y = y;
}
override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
{
//
}
}
Но, как вы говорите, поскольку графический объект всегда, кажется, рисует за содержимым элемента списка, я обычно предпочитаю использовать средство визуализации элементов для рисования чего-либо (например, полупрозрачного прямоугольника) поверх изображения, связанного с моим элементом данных:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private function img_rollOver():void
{
highlight.visible = true;
}
private function img_rollOut():void
{
highlight.visible = false;
}
]]>
</mx:Script>
<mx:Image id="img" source="{something}" horizontalCenter="0" verticalCenter="0" buttonMode="true" useHandCursor="true" mouseChildren="true" rollOver="img_rollOver()" rollOut="img_rollOut()" />
<mx:Box id="highlight" alpha="0.1" color="#FFFFFF" horizontalCenter="0" verticalCenter="0" width="{img.width}" height="{img.height}" buttonMode="true" useHandCursor="true" mouseChildren="true" rollOver="img_rollOver()" rollOut="img_rollOut()" visible="false" />
</mx:Canvas>
Я уверен, что есть и другие подходы, но этот подход работает довольно хорошо для меня, и я обычно нахожу и другие преимущества для подклассов стандартных элементов управления Flex.
Надеюсь, это поможет!