Question

flex4中如何去除combobox竖直方向分割符的例子

Answer 1

<?xml version="1.0"encoding="utf-8"?>
<s:Application name="Halo_ComboBox_skin_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">

<mx:ComboBox id="comboBox"
dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
skin="skins.CustomComboBoxSkin"
horizontalCenter="0"verticalCenter="-60"/>

</s:Application>

skins/CustomComboBoxSkin.mxml

<?xml version="1.0"encoding="utf-8"?>
<local:SparkSkinForHalo name="CustomComboBoxSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:local="mx.skins.spark.*"
minWidth="21"minHeight="21"
alpha.disabled="0.5">
<!-- states -->
<local:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</local:states>

<fx:Script>

static private const exclusions:Array = ["arrow"];
override public function get colorizeExclusions():Array {
return exclusions;
}

static private const symbols:Array = ["arrowFill1","arrowFill2"];
override public function get symbolItems():Array {
return symbols
}

static private const borderItem:Array = ["borderEntry1","borderEntry2"];
override protected function get borderItems():Array {
return borderItem;
}
</fx:Script>

<!-- layer 1: shadow -->
<s:Rect left="-1"right="-1"top="-1"bottom="-1"radiusX="2"radiusY="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.01"
alpha.down="0"/>
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.07"
alpha.down="0.5"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

<!-- layer 2: fill -->
<s:Rect left="1"right="1"top="1"bottom="1"radiusX="2"radiusY="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.over="0xBBBDBD"
color.down="0xAAAAAA"
alpha="0.85"/>
<s:GradientEntry color="0xD8D8D8"
color.over="0x9FA0A1"
color.down="0x929496"
alpha="0.85"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

<!-- layer 3: fill lowlight -->
<s:Rect left="1"right="1"bottom="1"height="9"radiusX="2"radiusY="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"alpha="0.0099"/>
<s:GradientEntry color="0x000000"alpha="0.0627"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

<!-- layer 4: fill highlight -->
<s:Rect left="1"right="1"top="1"height="9"radiusX="2"radiusY="2">
<s:fill>
<s:SolidColor color="0xFFFFFF"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12"/>
</s:fill>
</s:Rect>

<!-- layer 5: highlight stroke (all states except down) -->
<s:Rect left="1"right="1"top="1"bottom="1"radiusX="2"radiusY="2"excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90"weight="1">
<s:GradientEntry color="0xFFFFFF"alpha.over="0.22"/>
<s:GradientEntry color="0xD8D8D8"alpha.over="0.22"/>
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>

<!-- layer 6: highlight stroke (down state only) -->
<s:Rect left="1"top="1"bottom="1"width="1"includeIn="down">
<s:fill>
<s:SolidColor color="0x000000"alpha="0.07"/>
</s:fill>
</s:Rect>
<s:Rect right="1"top="1"bottom="1"width="1"includeIn="down">
<s:fill>
<s:SolidColor color="0x000000"alpha="0.07"/>
</s:fill>
</s:Rect>
<s:Rect left="2"top="1"right="2"height="1"includeIn="down">
<s:fill>
<s:SolidColor color="0x000000"alpha="0.25"/>
</s:fill>
</s:Rect>
<s:Rect left="1"top="2"right="1"height="1"includeIn="down">
<s:fill>
<s:SolidColor color="0x000000"alpha="0.09"/>
</s:fill>
</s:Rect>

<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
<s:Rect left="0"right="0"top="0"bottom="0"width="69"height="20"radiusX="2"radiusY="2">
<s:stroke>
<s:LinearGradientStroke rotation="90"weight="1">
<s:GradientEntry id="borderEntry1"
alpha="0.5625"
alpha.down="0.6375"/>
<s:GradientEntry id="borderEntry2"
alpha="0.75"
alpha.down="0.85"/>
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>

<!-- layer 8: arrow -->
<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 id="arrowFill1"color="0"alpha="0.6"/>
<s:GradientEntry id="arrowFill2"color="0"alpha="0.8"/>
</s:RadialGradient>
</s:fill>
</s:Path>

</local:SparkSkinForHalo>