Question

有没有办法在Flex应用程序的（MXML）元素周围放置边框？我正在想象类似于Firebug使用Inspect按钮为HTML做的事情（参见http://getfirebug.com/html并搜索“inspect”以查看我的意思。）

这样做的原因是我在布局方面遇到了一些麻烦。

Answer 1

你可以试试“Kap Inspect”，它可能是最接近Flex环境中的firebug的东西。

在此处查看演示：http://lab.kapit.fr/demo/kapinspect/prod/index.html

从这里下载：http://lab.kapit.fr/display/kapinspect/Kap+Inspect

Answer 2

FlexSpy是另一种工具，可让您浏览UI并检查属性。

Answer 3

我已经多次这样做，以找出布局问题，但不是来自MXML。

在AS中，您可以在给定组件的图形层中绘制矩形。

一种方法是为父级MXML组件creationComplete事件创建一个侦听器，并在那里绘制矩形 - 您必须等到所有内容都完成实例化和测量以确保您具有正确的尺寸。

如果您的应用可以调整大小，您还需要创建一个调整大小的侦听器。

松散的东西，像这样：

private function creationCompleteListener():void
{
    drawRectanglesAroundDisplayElements();
}

private function drawRectanglesAroundDisplayElements():void
{
    for each(var displayElement:DisplayObject in displayList)
    {
        var graphicsLayer:Graphics = displayElement.graphics;
        graphicsLayer.lineStyle(1,0xFF0000);
        graphicsLayer.drawRect(0,0,displayElement.width, displayElement.height);
    }
}

它将遍历所有显示对象，包括DisplayObjectContainer对象，并在它们周围放置1px红色边框。

您可能更喜欢仅突出显示某些类型的显示对象，如果是，则可以通过检查给定的DisplayObject的名称或数据类型来进行筛选。

有时我会为某些对象添加半透明背景的填充。我发现重叠背景比相交线更容易看到（当然，这通常是不可行的）。

例如，如果您想为所有VBox提供透明的蓝色bg以及红色轮廓，您可以像这样修改上述内容：

private function drawRectanglesAroundDisplayElements():void
{
    for each(var displayElement:DisplayObject in displayList)
    {
        var graphicsLayer:Graphics = displayElement.graphics;

        if(displayElement is VBox)
        {
            graphicsLayer.beginFill(0x0000FF,.3);
            graphicsLayer.drawRect(0,0,displayElement.width, displayElement.height);
            graphicsLayer.endFill();
        }

        graphicsLayer.lineStyle(1,0xFF0000);
        graphicsLayer.drawRect(0,0,displayElement.width, displayElement.height);
    }
}

希望有所帮助。

Answer 4

正如我即将发布的那样，我想到了在Flex Builder 3中使用mxml编辑器的Design视图。这或多或少地做了我想要的。还有其他建议吗？

在Flex App中显示元素边框？

4 个答案: