如何在Flex中向UIComponent添加滚动条

Question

我有以下情况。

<mx:Canvas id="canvas" height="100%" width="100%">
<mx:UIComponent id="chart" width="100%" height="100%"/> 
</mx:Canvas>

现在有一个SVGDocument组件作为子项添加到UIComponent之上。它基本上是svg图像。我为此实现了缩放功能。因此，在鼠标向上滚动和鼠标向下滚动时，SVGDocument元素将分别放大和缩小。我想向UIComponent'chart'添加滚动条，这样每当SVGDocument变得足够大时，就会出现滚动条。目前我没有找到任何方法来添加这个。任何人都可以建议吗？

Answer 1

您需要将UIComponent定位在Canvas上的（0,0）并调整Canvas的大小以匹配SVG图像的宽度和高度。将Canvas包裹在Box中，并在需要时设置滚动条。 Canvas大小使Box显示或隐藏滚动条。

<mx:Box width="100%" height="100%">
  <mx:Canvas id="canvas"><!-- set width & height to match SVG image -->
    <mx:UIComponent id="chart" x="0" y="0"/>
  </mx:Canvas>
</mx:Box>

Answer 2

如果您不想手动管理滚动条，则应使用Scroller和Group组件（用于spark）或某种Box用于mx。 不要忘记限制Scroller或Box大小以禁止他们扩展到其父级边框之外。 如果您想要自定义滚动行为，可以手动将Group的{​​{1}}属性设置为true并处理其clipAndEnableScrolling属性。