Flex 滚动条答案

【问题标题】：Flex ScrollBarsFlex 滚动条
【发布时间】：2023-03-07 15:52:01
【问题描述】：

我在为我的 Flex 应用程序显示滚动条时遇到问题...我尝试了一个带有画布的基本应用程序，但滚动条从未出现在浏览器窗口上，尽管画布比屏幕上所能容纳的大得多。有人可以帮忙吗？这是我的代码：

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

    <mx:Canvas id="MyCanvas" height="2500" width="2000" verticalScrollPolicy="auto" 
    horizontalScrollPolicy="auto" backgroundColor="black" symbolColor="#000000"
    contentBackgroundColor="#080808"/>

    </s:Application>

【问题讨论】：

标签： apache-flex scrollbar

【解决方案1】：

您想要画布中的滚动条吗？还是在您的主应用程序中？如果您想要画布中的滚动条，只需添加超出画布高度和宽度的内容。它会“神奇地”添加它们，因为这就是 MX/Halo 组件的作用。

如果您想在主应用程序中添加滚动条，则必须使用滚动组件和组手动添加它们。概念上是这样的：

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

<s:Scroller height="100" width="100">
 <s:Group width="100%" height="100%" clipAndEnableScrolling="true">
    <mx:Canvas id="MyCanvas" height="2500" width="2000" verticalScrollPolicy="auto" 
    horizontalScrollPolicy="auto" backgroundColor="black" symbolColor="#000000"
    contentBackgroundColor="#080808"/>

 </s:Group>

</s:Scroller>

    </s:Application>

根据我的经验，您需要在滚动条上指定固定的高度和/或宽度才能显示滚动条。还要确保在滚动条内的组上使用 clipAndenableScrolling，否则内容将显示在滚动条的视口之外——这有点违背目的。

Some good info from Adobe.

【讨论】：

如果添加到主应用程序皮肤文件，您不需要指定固定的宽度/高度（或做任何其他事情）来使应用程序滚动。
@Jonathan Rowny 你说的在概念上听起来是对的，但在实践中，我的结果与滚动条和百分比高度/宽度不一致。

【解决方案2】：

我使用我的应用程序 mxml 周围的滚动条/组让它工作得很好，我尝试了其他人的滚动条皮肤 def 但它没有用。

主要是将应用程序、滚动条和组的所有高度和宽度设置为 100%。

<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"
           width="100%" height="100%>
<s:Scroller height="100%" width="100%" horizontalScrollPolicy="on" verticalScrollPolicy="on">
<s:Group left="0" right="0" top="0" bottom="0">
     <!--...mxml....-->
</s:Group>
</s:Scroller>
</s:Application>

【讨论】：

【解决方案3】：

在 Flex 4+ (spark) 中，您不再使用“scrollPolicies”。 MX 画布仍然如此，因此如果您的画布内容超过 2500x2000，它们将滚动。

为了让您的整个 APP 拥有一个滚动条，您需要为应用程序创建一个皮肤并将“contentGroup”包装在一个标签中。

有关向 spark 应用程序添加滚动条的更多信息，请参阅：http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf62d75-7fff.html

【讨论】：