Question

我正在尝试为Flex 4火花面板创建一个外观，它将在面板的左/右侧创建一个与面板标题相匹配的边框。基本上围绕面板边缘的银色框架类似于旧的Flex 3 mx：面板。我整天都在试验一个皮肤文件，但无法正常工作。有什么想法吗？

Answer 1

我快速地把东西扔到了一起。基于现有的PanelSkin创建皮肤。然后去找id =“contentGroup”的组。把它改成这样的东西：

        <s:Group  width="100%" height="100%" minWidth="0" minHeight="0">
            <s:Line stroke="{wrapperStroke}" top="0" left="0" bottom="{0}" yFrom="0" yTo="{this.height}" xFrom="0" xTo="0"/>
            <s:Line stroke="{wrapperStroke}" top="0" right="0" bottom="{0}" yFrom="0" yTo="{this.height}" xFrom="0" xTo="0"/>
            <s:Group id="contentGroup">
            </s:Group>
        </s:Group>

然后，您需要做的就是将内容组移离边缘，并为笔划指定颜色和重量。因此，前往皮肤中的updateDisplayList并添加一些代码，如：

        wrapperStroke.color = 0xD9D9D9;
        wrapperStroke.alpha = 1.0;
        wrapperStroke.caps = CapsStyle.SQUARE;

        wrapperStroke.weight = 3;
        contentGroup.top = 3;
        contentGroup.bottom = 3;
        contentGroup.left = 3;
        contentGroup.right = 3;

还要将你的wrapperStroke放在声明区域中，如下所示：

<fx:Declarations>
    <s:SolidColorStroke id="wrapperStroke" />
</fx:Declarations>

我对所有内容进行了硬编码，但您应该可以轻松地将它们作为样式。您的PanelSkin现在应该看起来像this。我增加了中风的重量，因此更容易看到。

Flex 4面板边框皮肤

1 个答案: