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红色边框显示divideBox的限制

谢谢。我希望没有太多的错，英语不是我的母语。对不起任何英语错误。

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，即可显示图片。

Flex DividedBox子项显示在外面

1 个答案: