Question

我正在关注此示例，以便在我的应用程序中使用滚动条 http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/

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

提前致谢。

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>

Flex 4应用程序滚动条

1 个答案: