自定义SkinnableContainer皮肤边框

时间:2011-05-02 17:09:59

标签: flex actionscript-3 flex4

我有一个SkinnableContainer,我想添加一个边框。我已经创建了一个皮肤类,它可以成功地在容器的所有四个边上创建一个1像素的边框,但是,我希望边框只用于容器的顶部和底部,而不是侧面(左侧,右侧)。我怎么能做到这样的事情?我附上了目前的皮肤类。请帮忙!提前谢谢。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\mySkins\MyBorderSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark" >

<fx:Metadata>
    [HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>

<!-- Define the skin states. -->
<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<!-- Define a Rect to fill the area of the skin. -->
<s:Rect x="0" y="0"
        height="100%" width="100%">
    <s:stroke>
        <s:LinearGradientStroke weight="1"/>
    </s:stroke>         
</s:Rect>

<!-- Define the content area of the container. -->
<s:Group id="contentGroup"
         left="5" right="5" top="2" bottom="2">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
</s:Group>        
</s:Skin>

1 个答案:

答案 0 :(得分:2)

使用类似:

<s:Line left="0" top="0" right="0">
    <s:stroke>
        <s:LinearGradientStroke weight="1"/>
    </s:stroke>
</s:Line>

<s:Line left="0" bottom="0" right="0">
    <s:stroke>
        <s:LinearGradientStroke weight="1"/>
    </s:stroke>
</s:Line>

而不是Rect声明。