跳跃的弹性布局

Question

我对 Flex 比较陌生，但在经历了一些危机后需要接管应用程序的维护和开发。我总体上熟悉 AS3 和 OOP（如果这有帮助的话）。

该应用程序是使用 Flex builder 3、Flex SDK 4.1 构建的，并且基于 Halo 主题。 Main.mxml 包含一些导航片段、应用程序边框和名为占位符的画布。

当用户在站点中导航时，Main.mxml 的状态会发生更改，并基于此在占位符内交换相应的“屏幕”，而不应用任何动画（有时，ProgressBar 会暂停进度，直到加载数据为止）。每个屏幕的大小与主应用程序相同，基于 mx:Canvas 并设置为将自身定位在 0,0 处，从而填充整个窗口。

首先，这是一个好方法吗？您会对需要改变的事情提出什么建议吗？

接下来，一些屏幕的布局和定位出现了一些奇怪的跳跃，我一生都无法弄清楚为什么。它发生在许多视觉元素上。

我的第一个示例是使用 hbox、图像和文本控件构建的按钮。水平盒已修改为包含渐变背景，但使用默认的 mx 水平盒时会出现问题。第一个图像是在第一次渲染时没有交互，第二个图像是在我将鼠标滚动到它上面之后，第三个（也是正确的）图像是在离开该屏幕然后返回之后。请注意，它不再被剪切，并且也包括右侧的圆角。

我的第二个示例更难捕捉，但我有一系列基于 flexlib 高级按钮外观堆叠在 mx:vbox.在第一次显示时，它们是正确的，在第二次显示时，它们看起来是正确的，但是当将鼠标悬停在它们上方时，某些东西似乎发生了变化，但我不确定是什么导致下面的按钮为每个悬停在上面的按钮向下跳跃大约一个像素。每个按钮引起跳跃后，一切都会恢复正常。

最后，当返回到上一个屏幕时，整个屏幕在显示后似乎会稍微向左跳，从而产生非常不稳定的外观。

非常感谢您的任何帮助

编辑 - 成功

经过几个小时的尝试您的建议并一一从舞台上删除元素后，我最终发现问题的根源是borderMetricsVideoDisplay 控件的 code> 属性。删除这些后（我什至不确定它们为什么在那里），我遇到的所有奇怪的显示问题都消失了。

非常感谢您的建议！

Answer 1

我建议为您的按钮发布一些代码，以便我们可以分析它，但您看到的是组件多次测量自身的结果。我过去解决这个问题的方法是在组件及其子组件上设置显式大小，和/或在组件/子组件上明智地添加 minWidth="0" 属性。后者是使组件正确测量自身的老技巧。希望有帮助。如果没有，请发布一些代码。祝你好运。

Answer 2

经过几个小时的尝试您的建议并弄乱从舞台上一一删除元素后，我最终发现问题的根源是 VideoDisplay 控件的 borderMetrics 属性。删除这些后（我什至不确定它们为什么在那里），我遇到的所有奇怪的显示问题都消失了。