AutoHiding Personnalisé Scrollbar Flex 4

Question

J'ai une barre de défilement personnalisée qui contrôle un groupe en tant que fenêtre d'affichage.

<s:HGroup> 
     <s:Group width="520" height="380" clipAndEnableScrolling="true" id="descriptionBox" > 
      <s:RichText text="Test Test Test Test Test Test Test " 
         width="490" textAlign="justify" fontFamily="Arial" fontSize="12" color="#999999" /> 
     </s:Group> 
     <s:VScrollBar viewport="{descriptionBox}" 
       left="{descriptionBox.x + descriptionBox.width + 10}" 
       top="10" 
       height="{descriptionBox.height}" 
       fixedThumbSize="true" 
       skinClass="VScrollBarSkin"/> 
    </s:HGroup> 

Je veux faire que scrollbar autohide lorsque le contenu de ce groupe ne dépasse pas la vue, toute idée comment faire génériquement (ce qui signifie que je ne veux pas dépendre d'un composant à l'intérieur du groupe de la fenêtre) ?

Merci.

Answer 1

Le composant Scroller dans Flex 4 fait exactement cela:

• Autohides/montre des barres de défilement horizontal et vertical sur un GroupBase (groupe ou DataGroup, qui sont IViewports)
• vous permet de personnaliser les barres de défilement par la peau

Voici le code qui ferait ce que vous décrivez:

<s:Application 
    xmlns="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"> 

    <Script> 
     <![CDATA[ 

      private var times:int = 400; 

      private function updateText(type:String):void 
      { 
       var newText:String = ""; 
       var i:int = 0; 
       var n:int = times; 
       for (i; i < n; i++) 
       { 
        newText += "Test "; 
       } 
       var text:String = richText.text; 
       if (type == "add") 
        text += newText; 
       else 
        text = newText.replace(text) + ''; 
       richText.text = text; 
      } 

     ]]> 
    </Script> 
    <s:HGroup> 
     <s:Button label="+" click="updateText('add')"/> 
     <s:Button label="-" click="updateText('remove')"/> 
    </s:HGroup> 
    <s:Scroller width="520" height="380" id="scroller" minViewportInset="1" focusEnabled="false"> 
     <s:Group clipAndEnableScrolling="true" id="descriptionBox"> 
      <s:RichText id="richText" creationComplete="updateText('add')" 
       width="490" textAlign="justify" fontFamily="Arial" fontSize="12" color="#999999" /> 
     </s:Group> 
    </s:Scroller> 
</s:Application> 

Vous ne voudriez pas ajouter de largeur/hauteur explicite sur votre groupe, car cela dépend de la taille de ses enfants. Si vous l'enroulez dans un Scroller, il gère tous les détails pour vous.

Vous pouvez consulter VScrollBarSkin, VScrollBarThumb, VScrollBarTrack, etc. si vous souhaitez personnaliser les graphiques de ces éléments. Et si vous ne voulez pas un Horizontal ScrollBar, vous ne pouvez pas l'inclure dans votre classe MyScrollerSkin.

espoir qui aide, Lance