Flex 4 面板边框皮肤答案

【问题标题】：Flex 4 Panel Border SkinFlex 4 面板边框皮肤
【发布时间】：2011-03-24 10:08:12
【问题描述】：

我正在尝试为 Flex 4 spark 面板创建皮肤，该面板将在面板的左侧/右侧创建与面板标题匹配的边框。基本上是一个银色框架，一直围绕在面板的边缘，类似于旧的 Flex 3 mx:Panel。我整天都在试验皮肤文件，但什么也做不了。有什么想法吗？

【问题讨论】：

标签： apache-flex flash flex4 panel

【解决方案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>

然后您需要做的就是将您的 contentGroup 从边缘移开，并为笔划赋予颜色和权重。因此，前往皮肤中的 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。我增加了笔画的重量，以便更容易看到。

【讨论】：