关键是利用SuperPanel有个titleBackgroundSkin属性
1 <containers:SuperPanel xmlns:fx="http://ns.adobe.com/mxml/2009"
2 xmlns:s="library://ns.adobe.com/flex/spark"
3 xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:containers="net.brandonmeyer.containers.*" layout="absolute"
4 title="标记列表"
5 fontStyle="normal"
6 fontWeight="bold"
7 backgroundColor="#EBEBEB"
8 titleBackgroundSkin="com.skin.SuperPanelSkin"
9 color="#ffffff"
10 headerHeight="20"
11 width="300" height="100%"
12 horizontalAlign="center"
13 verticalAlign="middle"
14 allowMinimize="true"
15 allowResize="true"
16 allowDrag="true"
17 close="this.removeChild(this);" xmlns:note="com.view.note.*">
18 </containers:SuperPanel>
下面是SuperPanelSkin.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
3 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
4 minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
5
6 <fx:Metadata>
7 <![CDATA[
8 /**
9 * @copy spark.skins.spark.ApplicationSkin#hostComponent
10 */
11 [HostComponent("spark.components.Panel")]
12 ]]>
13 </fx:Metadata>
14
15 <s:states>
16 <s:State name="normal" />
17 <s:State name="disabled" />
18 <s:State name="normalWithControlBar" stateGroups="withControls" />
19 <s:State name="disabledWithControlBar" stateGroups="withControls" />
20 </s:states>
21
22
23 <!-- drop shadow can't be hittable so all other graphics go in this group -->
24 <s:Group left="0" right="0" top="0" bottom="0">
25 <!-- layer 2: background fill -->
26 <!--- Defines the appearance of the PanelSkin class's background. -->
27 <s:Rect id="background" left="0" top="0" right="0" bottom="0" radiusX="4">
28 <s:fill>
29 <!--- @private
30 Defines the PanelSkin class's background fill. The default color is 0xFFFFFF. -->
31 <s:SolidColor id="backgroundFill" color="#7d7d7d"/>
32 </s:fill>
33 </s:Rect>
34 <s:Label id="title" color="#eeeeee"/>
35 </s:Group>
36 </s:SparkSkin>