Flex: existe-t-il un moyen de mettre en surbrillance TileList "over" itemRenderer?

Question

Mon rendu d'élément est une image, et la surbrillance pour l'élément sélectionné est sous l'image afin que vous ne puissiez pas voir la surbrillance, y at-il un moyen de faire la surbrillance "sur" l'image?

Merci.

Answer 1

C'est exactement à ce point que j'ai réalisé à quel point certaines choses simples dans Flex peuvent être compliquées. :)

Il existe différentes façons de gérer un problème comme celui-ci en fonction de l'effet recherché, mais la façon dont je l'ai toujours fait est d'abord en remplaçant certaines fonctions de la TileList, puis en utilisant itemRenderers personnalisé . (Je n'ai jamais été capable de comprendre comment faire en sorte que l'objet graphique de la liste soit top du contenu rendu, cependant - quelqu'un d'autre pourrait être en mesure de faire la lumière là-dessus.)

Par exemple , Je vais généralement créer une nouvelle classe qui étend TileList, puis remplacer les méthodes chargées de dessiner les indicateurs de surbrillance et de sélection pour obtenir un peu plus de contrôle sur la façon dont ces fonctions dessinent les indicateurs (ou parfois je vais commenter leur contenu tout à fait, de sorte que rien ne se dessiné):

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 
    { 
     // 
    } 
} 

Mais comme vous le dites, puisque l'objet graphique semble toujours dessiner derrière le contenu de l'élément de la liste, je vais opter généralement d'utiliser un moteur de rendu d'élément pour dessiner quelque chose (par exemple, une boîte translucide) au-dessus de l'image associée à mon élément de données:

<?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> 

Je suis sûr il y a d'autres approches, mais celle-ci fonctionne plutôt bien pour moi, et je trouve généralement d'autres avantages à sous-classer les commandes flex de stock.

J'espère que ça aide!

Answer 2

Pensé à l'aide d'une bordure, en remplissant l'image par 2px? Une autre alternative qui vient à l'esprit est le positionnement absolu ...

Answer 3

Je pense qu'il est plus facile de désactiver les effets de sélection et de surbrillance, puis de créer ce que vous attendez dans le moteur de rendu. Les données pour le moteur de rendu devront avoir une sorte de propriété .selected dedans. Le moteur de rendu peut alors lier ou répondre aux changements de son data.selected (ou quelque chose de similaire) et mettre à jour son apparence comme bon vous semble.

Je n'utilise que les visuels par défaut sur la liste quand je n'ai pas d'autre choix. Je ne voudrais jamais essayer d'étendre List (bien que, bon code Christian).