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

您必须使用Scroller并将要滚动的视口包装在其中。

Answer 2

以下是如何添加垂直滚动的基本演示：

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

Answer 3

除非我使用这个神奇的食谱，否则我似乎无法让它工作：

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

一旦内容对于可见区域变大，滚动条就会出现

如何在移动flex中启用VerticalLayout滚动？

3 个答案: