flex 去掉combobox中的竖直分割线

flex 4   sdk 4.5.1   

  <s:ComboBox width="60" height="20"/>

生成一个默认的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">

    <!-- host component -->
    <fx:Metadata>
        <![CDATA[
        /**
        * @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>

    <!---
        The PopUpAnchor control that opens the drop-down list.

        <p>In a custom skin class that uses transitions, set the
        <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
    -->
    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
                   left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
                   popUpPosition="below" popUpWidthMatchesAnchorWidth="true">

        <!---
            This includes borders, background colors, scrollers, and filters.
            @copy spark.components.supportClasses.DropDownListBase#dropDown
        -->
        <s:Group id="dropDown">

            <!-- drop shadow -->
            <!--- @private -->
            <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"/>



            <!-- fill -->
            <!--- Defines the appearance of drop-down list's background fill. -->
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <!---
                        @private
                        The color of the drop down's background fill.
                        The default color is 0xFFFFFF.
                    -->
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>

            <!--- @private -->
            <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
                <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                <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>

    <!---  The default skin is ComboBoxButtonSkin.
            @copy spark.components.supportClasses.DropDownListBase#openButton
            @see spark.skins.spark.ComboBoxButtonSkin -->
    <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
              skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" />
    <!--- @copy spark.components.ComboBox#textInput -->
    <s:TextInput id="textInput" enabled.disabled="false"
                 left="0" right="18" top="0" bottom="0"
                 skinClass="spark.skins.spark.ComboBoxTextInputSkin"/>

</s:SparkSkin>

我删掉了生成的文件里面所有<fx:script>标签里面的东西以及<s:PopUpAnchor id="popUp" 里面border。

其中：

 <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
              skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" /> 

控制下拉按钮的样式；

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

控制显示框的样式。

然后，为Button 和 textinput 的skinClass属性分别设置新的皮肤 如下：
    <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
              skinClass="skins.ComboboxButtonSkin" tabEnabled="false" />  
     <s:TextInput id="textInput" enabled.disabled="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>
        <![CDATA[
        /**
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>


    <!-- states -->
    <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>
        <![CDATA[
        /**
        * @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>

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

    <!-- fill -->
    <!--- Defines the appearance of the TextInput component's background. -->
    <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>

    <!-- shadow -->
    <!--- @private -->
    <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>

    <!-- text -->
    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:RichEditableText id="textDisplay"
                        verticalAlign="middle"
                        widthInChars="10"
                        left="1" right="1" top="1" bottom="1" />
    <!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
    <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>
 <s:Rect left="0" right="0" top="0" bottom="0" width="65" height="20"  id="border">  <s:stroke>   <s:LinearGradientStroke rotation="90">    <s:GradientEntry color="#909090"          alpha="0.5625"/>    <s:GradientEntry color="#909090"         alpha="0.75" />   </s:LinearGradientStroke>  </s:stroke> </s:Rect>
   <!---  The default skin is ComboBoxButtonSkin.
           @copy spark.components.supportClasses.DropDownListBase#openButton
           @see spark.skins.spark.ComboBoxButtonSkin -->
   <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false" height="20"
             skinClass="skins.ComboboxButtonSkin" tabEnabled="false" />
   <!--- @copy spark.components.ComboBox#textInput -->
   <s:TextInput id="textInput" enabled.disabled="false"
                left="0" right="18" top="0" bottom="0"
                skinClass="skins.ComboBoxTextInputSkin"/>

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

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

  学习ING。。