Flex DividedBox 子项显示在外面

Question

我在 Flex 中使用 DividedBox，它最初只包含一个数据网格。当我点击 Datagrid 上的一个 Item 时，第二个宽度为 0% 的元素（Spark Group）被添加到分割框中以显示图像。

问题是，当第二个元素添加到DividedBox时，图像部分显示在DividedBox之外，我不希望有这种行为。

这是有趣的代码：

<mx:DividedBox direction="horizontal" id="divider" borderColor="red" borderStyle="solid" borderVisible="true" right="10" left="10" top="10" bottom="10">
    <s:Group width="100%" height="100%">
        <!--datagrid-->
    </s:Group>
</mx:DividedBox>

这是添加divideBox的第二个孩子的代码（简化代码）：

private var _pdf_preview:Group = new Group();
[Bindable]
[Embed(source="assets/image/llama.jpg")]
private var imgClass:Class;

protected function itemOnClickHandler(event:MouseEvent):void
{
    _pdf_preview = new Group();
    var img:Image = new Image();
    img.source = imgClass;
    _pdf_preview.addElement(img);
    _pdf_preview.percentWidth = 0;
    divider.addElement(_pdf_preview);
}

这是问题的屏幕（顺便说一句，不要注意到我在 Gimp 上的技能 :)）。作为新用户，我无法将图像绑定到我的帖子：screen showing my problem 红色边框显示了分框的限制

谢谢。 我希望没有太多的错，英语不是我的母语。很抱歉有任何英文错误。

PS：我无法添加“DividedBox”标签，因为它之前不存在，而且我是“新用户”，所以我无法创建新标签。

Answer 1

您可以使用clipContent属性在DividedBox的边缘截断图像：

<mx:DividedBox clipContent="true" />

使用 Spark 容器时，clipAndEnableScrolling 是您实现相同目标所需的属性。

我还想指出，您通常不需要通过 ActionScript 动态添加组件。您可以改用“状态”。例如：

<s:states>
    <s:State name="normal" />
    <s:State name="image" />
</s:states>

<mx:DividedBox clipContent="true">
    <s:DataGrid />
    <s:Image includeIn="image" />
</mx:DividedBox>

现在显示图像所需要做的就是将currentState 设置为image。