Flex: есть ли способ выделить TileList «поверх» itemRenderer? - PullRequest
0 голосов
/ 13 мая 2009

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

Спасибо.

Ответы [ 3 ]

3 голосов
/ 13 мая 2009

Это как раз тот момент, когда я понял, насколько сложными могут быть некоторые простые вещи во 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.

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

1 голос
/ 13 мая 2009

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

0 голосов
/ 14 мая 2009

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

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

...