Как включить прокрутку с помощью VerticalLayout в мобильном flex?

Question

Я использую VerticalLayout и есть много компонентов внутри, так что дисплей не отображает все элементы:

<s:layout> 
     <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" /> 
    </s:layout> 
    <s:TextInput id="chp1" width="50%"/> 
    <s:TextInput id="chp2" width="50%"/> 
    <s:Button label="Enregistrer" click="enregistrer(event)" styleName="btn"/> 
    <s:Button label="Lire" click="lire(event)" styleName="btn" /> 
    <s:TextArea id="area"/> 
    <s:HGroup> 
     <s:Button label="Envoyer" click="send(event)" styleName="btn" /> 
     <s:Button label="Retour" click="navigator.popView()" styleName="btn" /> 
    </s:HGroup> 
    <s:TextArea id="resultHTTP"/> 
     ... 

Как включить вертикальную прокрутку в этом случае?

Answer 1

Я никогда не могу показаться, чтобы заставить его работать, если я использую этот волшебный рецепт:

<!-- Use size rules to set the upper limit in the bounding box with clipAndEnableScrolling --> 
<s:Group width="100%" height="100%" clipAndEnableScrolling="true"> 
    <!-- Pin the scroller to the absolute bounds --> 
    <s:Scroller top="0" left="0" bottom="0" right="0"> 
     <!-- The direction (vertical/horizontal) you want to scroll should         
      not have an explicit bounds--> 
     <s:Group width="100%"> 
      <s:layout> 
       <s:VerticalLayout horizontalAlign="center" paddingBottom="5" paddingLeft="5" paddingRight="5" 
            paddingTop="5" verticalAlign="middle" /> 
      </s:layout> 
      <!-- Scrollable content goes here --> 
     </s:Group> 
    </s:Scroller> 
</s:Group> 

В полосах прокрутки появляются, когда контент становится большим для видимой области.

Answer 2

Вы должны использовать Scroller и обернуть окно просмотра, которое вы хотите прокрутить в одном.

Answer 3

Вот основная демонстрация того, как добавить вертикальную прокрутку:

<s:Scroller height="100" width="100" verticalScrollPolicy="auto"> 
      <s:Group height="100%" width="100%"> 
       <mx:VBox height="100%" width="100%"> 
        <mx:Button label="abcd"/> 
        <mx:Button label="abcd"/> 
        <mx:Button label="abcd"/> 
        <mx:Button label="abcd"/> 
        <mx:Button label="abcd"/> 
        <mx:Button label="abcd"/> 
        <mx:Button label="abcd"/> 
        <mx:Button label="abcd"/> 
        <mx:Button label="abcd"/> 
       </mx:VBox> 
      </s:Group> 
     </s:Scroller>