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

Posted 2023-02-23

【中文标题】如何在 Flex 中向 UIComponent 添加滚动条

【英文标题】：How to add Scroll bars to UIComponent in Flex

【发布时间】：2013-04-05 18:42:12

【问题描述】：

我有以下情况。

<mx:Canvas id="canvas"  >
<mx:UIComponent id="chart"  /> 
</mx:Canvas>

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

【参考方案1】：

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

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

【参考方案2】：

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

【讨论】：

感谢您的回答，但是我使用的是 flex 3.0 并且那里没有滚动条。我尝试使用框但仍然没有出现滚动条。似乎 UIComponent 没有向其父级报告其高度和宽度。

您是否删除了width="100%" height="100%"？它会强制 UIComponent 适合您的盒子。