Actionscript 3 柔性火花组合箱

我需要删除火花组合框向下箭头。我可以做它的mx组件像这样

youcombobox instant.setStyle（“箭头按钮宽度”，0）

我们如何在spark Comobox中完成它

---

谢谢，

创建一个隐藏openButton的自定义外观。这是必需的蒙皮零件，因此必须将其可见性设置为false

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

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

--> 
<!--- The default skin class for the Spark ComboBox component. 
The skin for the anchor button for a ComboBox component 
is defined by the ComboBoxButtonSkin class.  The skin for the text input
is defined by the ComboBoxTextInputSkin class.

@see spark.components.ComboBox        
@see spark.skins.spark.ComboBoxButtonSkin

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<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> 

    <fx:Script fb:purpose="styling">
        <![CDATA[       
            private var paddingChanged:Boolean;
            private var cornerRadiusChanged:Boolean;
            private var cornerRadius:Number = 0;            

            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];

            /**
             * @private
             */
            override public function get contentItems():Array {return contentFill};

            /**
             *  @private
             */
            override protected function commitProperties():void
            {
                super.commitProperties();

                if (paddingChanged && textInput)
                {
                    // Push padding styles into the textDisplay
                    var padding:Number;

                    padding = getStyle("paddingLeft");
                    if (textInput.getStyle("paddingLeft") != padding)
                        textInput.setStyle("paddingLeft", padding);

                    padding = getStyle("paddingTop");
                    if (textInput.getStyle("paddingTop") != padding)
                        textInput.setStyle("paddingTop", padding);

                    padding = getStyle("paddingRight");
                    if (textInput.getStyle("paddingRight") != padding)
                        textInput.setStyle("paddingRight", padding);

                    padding = getStyle("paddingBottom");
                    if (textInput.getStyle("paddingBottom") != padding)
                        textInput.setStyle("paddingBottom", padding);
                    paddingChanged = false;
                }

                if (cornerRadiusChanged)
                {
                    cornerRadiusChanged = false;

                    /* var cr:Number = getStyle("cornerRadius");

                    if (openButton)
                    openButton.setStyle("cornerRadius", cr);
                    if (textInput)
                    textInput.setStyle("cornerRadius", cr); */
                }
            }

            /**
             *  @private
             */
            override public function styleChanged(styleProp:String):void
            {
                var allStyles:Boolean = !styleProp || styleProp == "styleName";

                super.styleChanged(styleProp);

                if (allStyles || styleProp.indexOf("padding") == 0)
                {
                    paddingChanged = true;
                    invalidateProperties();
                }
                if (allStyles || styleProp == "cornerRadius")
                {
                    cornerRadiusChanged = true;
                    invalidateProperties();
                }                
            }

            /**
             * @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                if (getStyle("borderVisible") == false)
                {
                    if (border)
                        border.visible = false;
                    if (background)
                    {
                        background.left = background.top = background.right = background.bottom = 0;
                    }
                    if (scroller)
                        scroller.minViewportInset = 0;
                }
                else
                {
                    if (border)
                        border.visible = true;
                    if (background)
                    {
                        background.left = background.top = background.right = background.bottom = 1;
                    }
                    if (scroller)
                        scroller.minViewportInset = 1;
                }

                if (dropShadow)
                    dropShadow.visible = getStyle("dropShadowVisible");

                //openButton.setStyle("cornerRadius", getStyle("cornerRadius"));

                if (borderStroke)
                {
                    borderStroke.color = getStyle("borderColor");
                    borderStroke.alpha = getStyle("borderAlpha");
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>

    <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"/>

            <!-- border -->
            <!--- @private -->
            <s:Rect id="border" left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <!--- @private -->
                    <s:SolidColorStroke id="borderStroke" weight="1"/>
                </s:stroke>
            </s:Rect>

            <!-- 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 -->
<!---- my only change is here ---->
        <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
                  skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" visible="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>

像这样使用它：

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

    <s:ComboBox skinClass="com.flextras.skins.ComboBoxNoDownArrow">
        <s:dataProvider>
            <mx:ArrayCollection>
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
            </mx:ArrayCollection>           
        </s:dataProvider>
    </s:ComboBox>
</s:WindowedApplication>

闪光
经理
梦境编织者
冷饮
闪光
经理
梦境编织者
冷饮
闪光
经理
梦境编织者
冷饮

---

如果需要的话，你可以对皮肤进行更多的调整；例如，将textInput上的“Right”值更改为0。启动Flash Builder所花的时间比编写cod所花的时间要多，因此我建议您通读一下spark architecture works中的蒙皮参考资料。

@flextras:我正在尝试这个免费的自动完成组合框。：）需要移除这个向下箭头按钮。我必须遵循同样的步骤吗？我认为你是最好的回答者。是的，你必须遵循同样的步骤。创建自定义蒙皮并删除向下箭头。我非常确信我在这个答案中发布的皮肤应该和我们的自动完成一起工作。