跳跃的弹性布局

Question

我对Flex相对较新，但需要在经历一些危机后接管应用程序的维护和开发。如果有任何帮助的话，我对AS3和OOP很熟悉。

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

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

首先，这是一个很好的方法，你会就改变的事情提出任何建议吗？

接下来，一些屏幕正在遭受一些奇怪的跳跃与布局和定位，对于我的生活，我无法弄清楚为什么。它发生在许多视觉元素上。

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

我的第二个例子难以捕捉，但我有一系列4个渐变按钮，基于mx:vbox堆叠的flexlib advanced button skin。在第一次显示时它们是正确的，在第二次显示时它们看起来是正确的但是当它们悬停在它们上面时，某些东西似乎发生了变化，但我不确定是什么导致下面的按钮向下跳过大约一个像素，每个按钮都悬停在上面。每个按钮引起跳转后，一切都恢复正常。

最后，当返回到上一个屏幕时，整个屏幕在显示后会略微向左跳跃，使其显得非常生涩。

非常感谢您的帮助

编辑 - 成功

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

非常感谢您的建议！

Answer 1

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

Answer 2

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