Flex 4 应用程序滚动条

Question

我遵循这个例子是为了在我的应用程序中有滚动条 http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/

不同之处在于，在我的应用程序文件中，我有一个包含三个视图的视图堆栈。只有当第二个视图显示时，我才需要我的应用程序来显示滚动条，但事实并非如此。如果我给我的视图堆栈一个固定的高度，滚动条就会出现，但我不想给一个固定的宽度。

提前致谢。

Answer 1

来自 Flex 4 SDK 文档 (link text)：

"ViewStack 容器的默认宽度和高度是第一个孩子的宽度和高度。每次更改活动孩子时，ViewStack 容器都不会改变大小。

您可以使用以下技术来控制 ViewStack 容器的大小，以便它显示其子级中的所有组件：

1. Set explicit width and height properties for all children to the same fixed values.
2. Set percentage-based width and height properties for all children to the same fixed values.
3. Set width and height properties for the ViewStack container to a fixed or percentage-based value.

您使用的技术基于您的应用程序和 ViewStack 容器的内容。”

要解决这个问题，您可以在导航器内容中添加一个滚动条。代码可能如下所示：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:TabBar dataProvider="{myselfViewStack}"/>
    <mx:ViewStack id="myselfViewStack" left="0" right="0" top="100" bottom="0">
        <s:NavigatorContent>
            <s:Scroller width="100%" height="100%">
                <s:Group>
                    <!-- scrollbar not shown -->
                    <s:Group width="100%" height="100">
                        <s:Label text="1"/>
                    </s:Group>      
                </s:Group>
            </s:Scroller>
        </s:NavigatorContent>
        <s:NavigatorContent>
            <s:Scroller width="100%" height="100%">
                <s:Group>
                    <!-- scrollbar shown -->
                    <!-- Explicit height set in group to "simulate" content -->
                    <s:Group width="100%" height="1500">
                        <s:Label text="2"/>
                    </s:Group>      
                </s:Group>
            </s:Scroller>
        </s:NavigatorContent>
        <s:NavigatorContent>
            <s:Label text="3"/>
        </s:NavigatorContent>
    </mx:ViewStack>
</s:Application>