Adobe Flex: Scrollbare Boxen

Question

Wenn eine Box mit dynamischer Größe (d. H. Breite100%) nicht groß genug für ihren Inhalt ist, wie bekomme ich diese Box zum scrollbaren Code, statt diese Repräsentation an ihre Eltern zu übergeben. Ich möchte nur, dass die Box so groß wird, wie Platz dafür ist.

I.e. Wenn Sie im folgenden Beispiel die Größe Ihres Browserfensters so ändern, dass die Textfelder nicht (in der Höhe) passen, wie bekomme ich box1 zum Anzeigen von Bildlaufleisten und nicht die gesamte Anwendung?

<?xml version="1.0"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"> 

    <mx:HDividedBox width="100%" height="100%"> 

     <mx:VBox id="box1" backgroundColor="green" height="100%" verticalScrollPolicy="on" clipContent="true"> 


      <mx:TextInput width="200"/> 

      <mx:TextInput width="200"/> 

      <mx:TextInput width="200"/> 

      <mx:TextInput width="200"/> 

      <mx:TextInput width="200"/> 

      <mx:TextInput width="200"/> 

     </mx:VBox> 

     <mx:Box backgroundColor="red" width="100%" height="100%"> 

     </mx:Box> 

    </mx:HDividedBox> 

</mx:Application> 

Ich habe versucht mit verticalScrollbarPolicy Auto und weiter, aber das hat nicht funktioniert.

Answer 1

So müssen Sie die vbox in einer Leinwand wickeln und die vbox setzen eine relative Höhe, um seinen Inhalt zu haben (indem sie nicht eine Höhe-Eigenschaft). Aus irgendeinem Grund muss es ein Canvas und kein anderes Box-Derivat sein. Auf diese Weise erhalten Sie den Effekt, den Sie erreichen möchten.

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" verticalScrollPolicy="off"> 

    <mx:HDividedBox width="100%" height="100%"> 

     <mx:Canvas id="box1" backgroundColor="green" height="100%" > 

      <mx:VBox > 
       <mx:Button width="200" /> 

       <mx:Button width="200"/> 

       <mx:Button width="200"/> 

       <mx:Button width="200"/> 

       <mx:Button width="200"/> 

       <mx:Button width="200"/> 
      </mx:VBox> 

     </mx:Canvas> 

     <mx:Box backgroundColor="red" width="100%" height="100%" /> 
    </mx:HDividedBox> 

</mx:Application> 

Will versuchen und kommen mit dem Grund, dass es eine Leinwand sein muss. Es fühlt sich in meinem Kopf an, aber es ist schwer zu artikulieren. Hoffentlich bekomme ich bald eine Erklärung.

Answer 2

Die Bildlaufleiste tritt nicht ein, da sie genügend Platz für alle untergeordneten Elemente bietet. Die Bildlaufleisten des Containers werden angezeigt, wenn seine Höhe/Breite für die gesamte Höhe/Breite aller untergeordneten Elemente zu klein ist. Hier ist ein kurzes Beispiel:

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" 
     verticalScrollPolicy="off"> 

    <mx:HDividedBox width="100%" height="600" verticalScrollPolicy="off"> 


     <mx:VBox id="box1" backgroundColor="green" height="100" 
        verticalScrollPolicy="auto" clipContent="true"> 


      <mx:TextInput width="100%"/> 

      <mx:TextInput width="100%"/> 

      <mx:TextInput width="100%"/> 

      <mx:TextInput width="100%"/> 

      <mx:TextInput width="100%"/> 

      <mx:TextInput width="100%"/> 

     </mx:VBox> 

     <mx:Box backgroundColor="red" width="100%" height="100%"> 

     </mx:Box> 

    </mx:HDividedBox> 

</mx:Application>