Adobe Flex迷你教程 —Flex圆角容器

    在Flex3时代可以设置borderSides属性达到圆角效果，如：borderSides="top left right" ，在Flex4中borderSides属性貌似已经没有了（其实flex3中很多的属性，在flex4中都没有了，已经换了其他实现方式）
那么，在flex4中要如何做才能达到上面说的效果呢？ 当然是SKIN，在flex4中更推荐用SKIN来控制组件的样式。
    我们写一个用 flashbuilder 来创建一个BoderContainer的圆角皮肤。

1.点击创建MXML外观，填好响应的参数，点击完成。

2.工具帮我们自动生成一个原有的skin，我们只需需要修改它的填充方式就达到了圆角的效果，看代码。

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark SkinnableContainer container.

 @see spark.components.SkinnableContainer

 @langversion 3.0
 @playerversion Flash 10
 @playerversion AIR 1.5
 @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">

    <fx:Metadata>
    <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.SkinnableContainer")]
        ]]>
    </fx:Metadata>

    <fx:Script fb:purpose="styling">
        <![CDATA[
        /**
         *  @private
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
        {
            // Push backgroundColor and backgroundAlpha directly.
            // Handle undefined backgroundColor by hiding the background object.
            if (isNaN(getStyle("backgroundColor")))
            {
                background.visible = false;
            }
            else
            {
                background.visible = true;
                bgFill.color = getStyle("backgroundColor");
                bgFill.alpha = getStyle("backgroundAlpha");
            }

            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
        ]]>        
    </fx:Script>

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

    <!--- Defines the appearance of the SkinnableContainer class's background.
我们在默认的Rect里添加 radius属性，它的值来自于 样式属性 conrnerRadius，我们只需在使用的组件上设置这个属性的值，就可以达到圆角的效果。

-->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0"
            radiusX="{getStyle('cornerRadius')}" radiusY="{getStyle('cornerRadius')}"
            >

        <!---边框的样式，我们也可以给这个颜色设置style，在updatedisplaylist里应用他-->
        <s:stroke>
            <!---@private -->
            <s:SolidColorStroke id="borderStroke" color="0x5380D0"/>
        </s:stroke>
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>

    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>

</s:Skin>

3.skin的使用，看代码。

<?xml version="1.0"?>
<!-- 
 * Created with IntelliJ IDEA.
 * @author DongYang
 * Date: 13-7-10
 * Time: 上午11:47
 * Progress every day a little more -->
<s:Application 
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">
        <s:BorderContainer skinClass="component.skin.BorderContainerAngleSkin" 
                           width="200" height="400"
                           backgroundColor="0xFF0000"
                           cornerRadius="10"
                 />
</s:Application>

 

  

转载于:https://www.cnblogs.com/yangpigao/p/3181885.html