Flex 画出一个带边框有标头的容器

在很多时候我们需要一个带边框，有标题的容器，这个需要用自定义skin来做.

其实就是用遮罩层mask来做的。话不多说，直接来代码吧

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600" xmlns:component="com.component.*">
	<s:layout>
		<s:HorizontalLayout horizontalAlign="center"/>
	</s:layout>
	<component:TitleGroup title="Title Group title name" width="400" height="600">
		<component:layout>
			<s:VerticalLayout horizontalAlign="center"/>
		</component:layout>
		<s:Label text="This is the content."/>
		<s:Label text="This is the content."/>
		<s:Label text="This is the content."/>
		<s:Label text="This is the content."/>
	</component:TitleGroup>
</s:Application>

 TitleGroup.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					  xmlns:s="library://ns.adobe.com/flex/spark" 
					  xmlns:mx="library://ns.adobe.com/flex/mx"
					  skinClass="com.component.skin.TitleGroupSkin">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import spark.components.CheckBox;
			import spark.components.Label;
			[SkinPart(required="true")]
			public var titleDisplay:Label;
			[SkinPart(required="true")]
			public var enabledCheckBox:CheckBox;//这个纯粹是让你们了解下稍微复杂点的标头的设计。比如加上一个checkbox
			
			private var _title:String;
			private var customTitleChanged:Boolean = false;

			public function set title(value:String):void
			{
				this._title = value;
				this.customTitleChanged = true;
				invalidateProperties();
			}
			public function get title():String
			{
				return this._title;
			}
			private var _allowGroupStatusControl:Boolean;
			private var allowGroupStatusControlChanged:Boolean = false;
			public function set allowGroupStatusControl(value:Boolean):void
			{
				this._allowGroupStatusControl = value;
				allowGroupStatusControlChanged = true;
				invalidateProperties();
			}
			
			private var _titleGroupSelected:Boolean = false;
			private var titleGroupSelectedChanged:Boolean = false;
			public function set titleGroupSelected(value:Boolean):void
			{
				this._titleGroupSelected = value;
				titleGroupSelectedChanged = true;
				invalidateProperties();
			}
			
			override protected function commitProperties():void
			{
				super.commitProperties();
				if(titleDisplay != null && this.customTitleChanged)
				{
					titleDisplay.text = this._title;
					this.customTitleChanged = false;				
				}
				if(enabledCheckBox != null && allowGroupStatusControlChanged)
				{
					enabledCheckBox.visible = enabledCheckBox.includeInLayout = this._allowGroupStatusControl;
					titleDisplay.visible = titleDisplay.includeInLayout = !this._allowGroupStatusControl;
					allowGroupStatusControlChanged = false;
					contentGroup.enabled = false;
				} 
				if(titleGroupSelectedChanged && enabledCheckBox && contentGroup)
				{
					contentGroup.enabled = enabledCheckBox.selected = this._titleGroupSelected;
					titleGroupSelectedChanged = false;
				}
			} 
			
			override protected function partAdded(partName:String, instance:Object):void
			{
				super.partAdded(partName,instance);
				 if(instance == enabledCheckBox)
				{
					 enabledCheckBox.label = this.title;
					enabledCheckBox.addEventListener(flash.events.Event.CHANGE,callback);
				}
				function callback(evt:Event):void
				{
					if(enabledCheckBox.selected)
					{
						contentGroup.enabled = true;
					}
					else
					{
						contentGroup.enabled = false;
					}
					dispatchEvent(new Event("titleGroupStatusChanged"));
				} 
			}
			
			public function get titleGroupEnabled():Boolean
			{
				return contentGroup.enabled;
			}
		]]>
	</fx:Script>
	<fx:Metadata>
		[Event(type="flash.events.Event",name="titleGroupStatusChanged")]
	</fx:Metadata>
</s:SkinnableContainer>

 TitleGroupSkin.mxml

<?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> 
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
	<!--定义一个遮罩层，遮罩层的地方都可以被看到-->
	<s:Group id="borderGroupMask" left="0" right="0" top="0" bottom="0">
		<s:Rect left="0" width="7" top="0" bottom="0">
			<s:fill>
				<s:SolidColor color="#ff0000" alpha="1"/>
			</s:fill>
		</s:Rect>
		<s:Rect left="7" width="{titleGroup.width+4}" top="30" bottom="0">
			<s:fill>
				<s:SolidColor color="#00ff00" alpha="1"/>
			</s:fill>
		</s:Rect>
		<s:Rect left="{titleGroup.width + 11}" width="100%" top="0" bottom="0">
			<s:fill>
				<s:SolidColor color="#0000ff" alpha="1"/>
			</s:fill>
		</s:Rect>
	</s:Group>
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
	<s:Rect left="0" top="5" right="0" width="100%" height="100%" 
			mask="{borderGroupMask}"
			topLeftRadiusX="6"  topRightRadiusX="6" bottomLeftRadiusX="6" bottomRightRadiusX="6">
		<s:stroke>
			<s:SolidColorStroke color="#D8D8D8" scaleMode="none"/>
		</s:stroke>
	</s:Rect>
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
	
	<s:BorderContainer id="titleGroup" left="10" top="0" borderAlpha="0" backgroundAlpha="0"
					   minWidth="20"
					   height="{titleDisplay.height}">
		<s:layout>
			<s:HorizontalLayout verticalAlign="middle" gap="2" paddingLeft="6"  paddingRight="6"/>
		</s:layout>
		<s:CheckBox id="enabledCheckBox" includeInLayout="false" visible="false"/>	
		<s:Label id="titleDisplay" fontSize="14"/>	
	</s:BorderContainer>
	
	
    <s:Group id="contentGroup" left="0" right="0" top="15" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:VerticalLayout paddingTop="6" paddingLeft="6" paddingRight="6" paddingBottom="6"/>
        </s:layout>
    </s:Group>

</s:Skin>

 效果图：