Flex: есть ли способ выделить TileList "поверх" itemRenderer?

Question

Мой рендерер элементов - это изображение, а выделение для выбранного элемента находится под изображением, поэтому вы не можете увидеть выделение. Есть ли способ сделать выделение "поверх" изображения?

Благодарю.

Answer 1

Это как раз тот момент, когда я понял, насколько сложными могут быть некоторые простые вещи во Flex.:)

Существуют различные способы решения такой проблемы, как эта, в зависимости от того, к какому эффекту вы стремитесь, но я всегда делал это сначала путем переопределения определенных функций TileList, а затем с помощью пользовательских itemRenderers. (Я никогда не мог понять, как сделать так, чтобы графический объект List рисовался поверх визуализируемого содержимого - кто-то другой мог бы пролить свет на это.)

Например, я обычно создаю новый класс, который расширяет 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.

Надеюсь, поможет!

Answer 2

Мысль об использовании границы, добавив изображение на 2 пикселя? Еще одна альтернатива, которая приходит на ум, - это абсолютное позиционирование...

Answer 3

Я думаю, что легче отключить выделение и выделить эффекты, а затем создать то, что вы ожидаете в рендере. Данные для средства визуализации должны иметь какое-то свойство.selected. Затем средство визуализации может связать или отреагировать на изменения своего data.selected (или чего-то подобного) и обновить его внешний вид так, как вы хотите.

Я использую визуальные эффекты по умолчанию только в списке, когда у меня нет другого выбора. Я никогда не хотел бы пытаться расширить список до него (хотя, хороший код Кристиан).