Flex 4 - s:滚动

Question

我创建了一个项目，其中包含 mx: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:comp="mycomp.*"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           height="100%" width="100%"
           minHeight="600"  minWidth="800">
<s:layout>
    <s:VerticalLayout horizontalAlign="center" />
</s:layout><mx:ViewStack horizontalCenter="0"
              verticalCenter="0"
              id="contentVs"
              height="100%"
              width="100%">
    <s:NavigatorContent name="biography"
                        label="Biography"
                        width="100%"
                        height="100%">
        <comp:Biography />
    </s:NavigatorContent>
    <s:NavigatorContent name="collections"
                        label="Collections"
                        width="100%"
                        height="100%">
        <comp:Collections/>

在 mxViewStack 内的每个 s:NavigatorContent 中，我都有一个自定义 s:SkinnableContainer 组件。在这些组件中，我添加了 as:Scroller 作为第一个子容器。

   <?xml version="1.0" encoding="utf-8"?>
   <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  width="100%" height="100%"
                  creationComplete="this_creationCompleteHandler(event)">
<s:Scroller id="scroller1"
            width="100%"
            height="100%">
    <s:Group>           
        <s:BorderContainer width="100%" height="100%" borderVisible="true">

请注意，应用程序的宽度和高度均为 100%。

现在，当我减小浏览器的大小时，滚动条不会出现。在 s:NavigatorContent（始终在 ViewStack 内）的一种情况下，会出现滚动条。

我很困惑为什么它只出现在一种情况下。如果我将策略设置为on，则 s:Scroller 会出现，但即使我将浏览器设置得非常小，它也会被禁用。

另外，我似乎找不到一种方法将这些滚动条涂成黑色。

谢谢。

Answer 1

我无法从您的代码示例中准确地看到，但是这一行：

<s:BorderContainer width="100%" height="100%" borderVisible="true">

使它看起来像滚动条组的内容设置了 height="100%" 。

仅当组的内容比其本身更宽或更高时，滚动条才会显示滚动条。

尝试将组的宽度和高度设置为 100%，并确保组的内容高于 Scroller。

例如。

<s:Scroller width="100%" height="100%">
    <s:VGroup width="100%" height="100%">

        <s:Label text="The rectangle below is very tall" />

        <!-- just a boring gradient rectangle -->
        <s:Rect width="200" height="1500">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFF00" />
                    <s:GradientEntry color="0x00FFFF" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

    </s:VGroup>
</s:Scroller>

Answer 2

我用 static(width="1200" height="800") 大小替换了 Viewstack 上的相对大小，这样就成功了。

<s:Group width="100%" height="100%">        
    <s:Scroller width="100%" height="100%">
        <s:VGroup horizontalAlign="center">
            <mx:ViewStack horizontalCenter="0"
                          verticalCenter="0"
                          id="contentVs"
                          width="1200" height="800">
                <s:NavigatorContent name="biography"

关于更改 Scroller 组件的颜色，我必须创建自己的皮肤。

Spark.components.Scroller 的皮肤以及：

VScrollBarSkin
VScrollBarTrackSkin
VScrollBarThumbSkin
滚动条向上按钮外观
ScrollBarDownButtonSkin

与 HScrollBar 相同...