Question

我有一个自定义滚动条，可以控制一个组作为其视口。

<s:HGroup>
        <s:Group width="520" height="380" clipAndEnableScrolling="true" id="descriptionBox" >
            <s:RichText  text="Test Test Test Test Test Test Test "
                        width="490" textAlign="justify" fontFamily="Arial" fontSize="12" color="#999999" />
        </s:Group>
        <s:VScrollBar viewport="{descriptionBox}" 
                left="{descriptionBox.x + descriptionBox.width + 10}" 
                top="10" 
                height="{descriptionBox.height}"
                fixedThumbSize="true"
                skinClass="VScrollBarSkin"/>
    </s:HGroup>

我希望当该组的内容不大于视图时，使滚动条自动隐藏，任何想法如何一般地这样做（意味着我不想依赖于视口组内的组件）？

感谢。

Answer 1

Flex 4中的Scroller组件正是如此：

自动隐藏/显示GroupBase（Group或DataGroup，即IViewports）上的水平和垂直滚动条
允许您通过皮肤自定义滚动条

以下代码将执行您所描述的内容：

<s:Application
    xmlns="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <Script>
        <![CDATA[

            private var times:int = 400;

            private function updateText(type:String):void
            {
                var newText:String = "";
                var i:int = 0;
                var n:int = times;
                for (i; i < n; i++)
                {
                    newText += "Test ";
                }
                var text:String = richText.text;
                if (type == "add")
                    text += newText;
                else
                    text = newText.replace(text) + '';
                richText.text = text;
            }

        ]]>
    </Script>
    <s:HGroup>
        <s:Button label="+" click="updateText('add')"/>
        <s:Button label="-" click="updateText('remove')"/>
    </s:HGroup>
    <s:Scroller width="520" height="380" id="scroller" minViewportInset="1" focusEnabled="false">
        <s:Group clipAndEnableScrolling="true" id="descriptionBox">
            <s:RichText id="richText" creationComplete="updateText('add')"
                width="490" textAlign="justify" fontFamily="Arial" fontSize="12" color="#999999" />
        </s:Group>
    </s:Scroller>
</s:Application>

您不希望在组上添加明确的宽度/高度，因为它取决于其子项的大小。如果将其包装在Scroller中，它会为您处理所有细节。

如果要自定义这些元素上的图形，可以查看VScrollBarSkin，VScrollBarThumb，VScrollBarTrack等。如果你不想要一个Horizontal ScrollBar，你可以不在MyScrollerSkin类中包含它。

希望有所帮助，兰斯

AutoHiding自定义滚动条Flex 4

1 个答案: