flex 去掉combobox中的竖直分割线

flex 4   sdk 4.5.1   

 

生成一个默认的combobox

  

然后在设计模式 --属性--样式--外观 --创建外观  为combobox设置新的皮肤：

 

自动生成如下的皮肤文件:

 

xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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=".5">


    <fx:Metadata>

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

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



            <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"
                                     angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>





            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>

            <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">

                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
                    s:layout>
                s:DataGroup>
            s:Scroller>
        s:Group>
    s:PopUpAnchor>


    <s:TextInput id="textInput" enabled.disabled="false"
                 left="0" right="18" top="0" bottom="0"
                 skinClass="spark.skins.spark.ComboBoxTextInputSkin"/>

s:SparkSkin>

我删掉了生成的文件里面所有标签里面的东西以及

其中：

                skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" /> 

控制下拉按钮的样式；

                   left="0" right="18" top="0" bottom="0"
                 skinClass="spark.skins.spark.ComboBoxTextInputSkin"/>

控制显示框的样式。

然后，为Button 和 textinput 的skinClass属性分别设置新的皮肤 如下：
                  skinClass="skins.ComboboxButtonSkin" tabEnabled="false" />  
                      left="0" right="18" top="0" bottom="0"
                 skinClass="skins.ComboBoxTextInputSkin"/> 
 其中   skins.ComboboxButtonSkin为 skins包下的ComboboxButtonSkin.mxml，代码如下：

 

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

<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                   minWidth="21" minHeight="21"
                   alpha.disabled="0.5">

    <fx:Metadata>

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



    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    s:states>
    <s:Rect left="2" right="2" top="2" bottom="2" id="border" height="20">
        <s:fill>
            <s:SolidColor color="#FFFFFF" alpha="1.0" />
        s:fill>
    s:Rect>
    <s:Rect left="1" right="1" top="1" bottom="1" id="fill">
        <s:fill>
            <s:LinearGradient>
                <s:GradientEntry color="#FFFFFF" alpha="0.5"/>
            s:LinearGradient>
        s:fill>
    s:Rect>
    <s:Path right="6" verticalCenter="0" id="arrow"
            data="M 4.0 4.0 L 4.0 3.0 L 5.0 3.0 L 5.0 2.0 L 6.0 2.0 L 6.0 1.0 L 7.0 1.0 L 7.0 0.0 L 0.0 0.0 L 0.0 1.0 L 1.0 1.0 L 1.0 2.0 L 2.0 2.0 L 2.0 3.0 L 3.0 3.0 L 3.0 4.0 L 4.0 4.0">
         <s:fill>
            <s:RadialGradient rotation="90" focalPointRatio="1">
                <s:GradientEntry  color="0" alpha="0.6" />
                <s:GradientEntry  color="0" alpha="0.8" />
                s:RadialGradient>
        s:fill>
    s:Path>

s:SparkButtonSkin>

skins.ComboBoxTextInputSkin"为skins包下的ComboBoxTextInputSkin，代码如下：

 

xml version="1.0" encoding="utf-8"?>
-->
<s:SparkSkin 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.disabledStates="0.5" blendMode="normal">

    <fx:Metadata>

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


    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="normalWithPrompt"/>
        <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
    s:states>



    <s:Rect left="1" right="1" top="1" bottom="1" id="border">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        s:fill>
    s:Rect>



    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:stroke>
            <s:SolidColorStroke color="#FFFFFF" weight="2" id="bgFill"/>
        s:stroke>
    s:Rect>



    <s:Rect left="1" top="1" right="1" height="1" id="shadow">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" alpha="1.0" />
        s:fill>
    s:Rect>



    <s:RichEditableText id="textDisplay"
                        verticalAlign="middle"
                        widthInChars="10"
                        left="1" right="1" top="1" bottom="1" />

    <s:Label id="promptDisplay" maxDisplayedLines="1"
             verticalAlign="middle"
             mouseEnabled="false" mouseChildren="false"
             includeIn="normalWithPrompt,disabledWithPrompt"
             includeInLayout="false"
             />

s:SparkSkin>

然后修改本文开头的自动生成的combobox的皮肤文件，为它加一个边框border：

 

       s:Group>
   s:PopUpAnchor>
                   alpha="0.5625"/>             alpha="0.75" />

   <s:TextInput id="textInput" enabled.disabled="false"
                left="0" right="18" top="0" bottom="0"
                skinClass="skins.ComboBoxTextInputSkin"/>

这样就会生成如下图所示的没有竖直分隔符的combobox：

本方法的具体思想就是：利用ComboboxButtonSkin   和 ComboBoxTextInputSkin两个皮肤文件，去掉Button 和 textInput的边框，然后为Combobox整体添加一个边框。另外，我删了所有生成的文件里面的标签里面的内容，因为我也不知道干什么的，但是删了以后不影响实现设计- -

  学习ING。。