FLEX4中的Panel如何实现带自定义图标和按钮

 
 做过flex开发的程序员都知道，使用flex3中的panel自定义按钮很容易，而且flex3的panel有icon属性。但是flex4的中大部分的控件与flex3中的控件实现方式有很大的变化，同是panel，在flex4  已经没有了icon属性，也没有titleBar，那么如何来实现 那些我们需要的东西呢？其实很简单，通过皮肤来实现。效果见附件上的图片。下面来说说如何实现：首先，在flex的库文件中把panel的系统皮肤代码复制出来，这样便于修改。找到 titleDisplay ，在这里你可以修改皮肤，实现你想要的效果，比如，我是这样修改：

<s:HGroup left="0" right="0" bottom="0" top="0" gap="6" verticalAlign="justify" paddingLeft="6">
     <s:Image id="titleIconImage" width="16" height="16" verticalAlign="middle"/>
     <!-- layer 3: text -->
     <!-- layer 3: text -->
     <!--- @copy spark.components.Panel#titleDisplay -->
     <s:Label id="titleDisplay" maxDisplayedLines="1"
        left="9" right="3" top="1" bottom="0" minHeight="20" height="27"
        verticalAlign="middle" textAlign="start" fontWeight="bold">
     </s:Label>
     <s:Spacer width="100%"/>
     <s:HGroup id="toolBar" left="0" right="0" bottom="2" top="2" gap="6" horizontalAlign="right" verticalAlign="middle" paddingRight="6" paddingBottom="2" paddingTop="2">
     </s:HGroup>

上面这段代码可以，实现 panel头部带图标，还可以任意添加 其他 控件。当然，还要相应的修改 panel的as文件。

评论

1 楼 316193613 2013-08-09  

panel.as怎么修改？