Flex 4 Spark 组件面板 - 隐藏标题栏

Posted

技术标签:

【中文标题】Flex 4 Spark 组件面板 - 隐藏标题栏【英文标题】:Flex 4 Spark component Panel - Hide Title Bar 【发布时间】:2011-10-29 20:06:59 【问题描述】:

我使用 Spark 面板来显示容器内的对象。面板和内部元素是动态创建的。 (使用动作脚本)。我需要在 actionscript 中删除面板的标题栏。当我试图删除它时,我无法隐藏它。

尝试了以下方法。

    使用样式(类名)并设置headerheight = 0

    覆盖面板组件并使用属性this.titleBar.visible = false

但无法隐藏标题栏。

我使用过 Panel spark 组件和 Flash Builder 4.5 进行开发。

如果有其他方法可以实现这一点,请告诉我。

【问题讨论】:

只创建一个没有标题栏的皮肤。面板没有任何必需的皮肤部件 【参考方案1】:

最好的办法是创建一个自定义皮肤并将标题栏从皮肤中移出。制作样本非常快。

这是你的自定义皮肤;创建为 PanelSkin 的副本,其中视觉元素被注释掉。

<?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 a Spark Panel container.  

    @see spark.components.Panel

    @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" blendMode="normal" mouseEnabled="false" 
    minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">

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

    <fx:Script fb:purpose="styling">
        <![CDATA[
        import mx.core.FlexVersion;

        /* Define the skin elements that should not be colorized. 
        For panel, border and title background are skinned, but the content area, background, border, and title text are not. */
        static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup", "border"];

        /* exclusions before Flex 4.5 for backwards-compatibility purposes */
        static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];

        /**
         * @private
         */
        override public function get colorizeExclusions():Array 
        
            // Since border is styleable via borderColor, no need to allow chromeColor to affect
            // the border.  This is wrapped in a compatibility flag since this change was added  
            // in Flex 4.5
            if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
            
                return exclusions_4_0;
            

            return exclusions;
        

        /**
         * @private
         */
        override protected function initializationComplete():void
        
            useChromeColor = true;
            super.initializationComplete();
        

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

            dropShadow.visible = getStyle("dropShadowVisible");

            var cr:Number = getStyle("cornerRadius");
            var withControls:Boolean = 
                (currentState == "disabledWithControlBar" || 
                 currentState == "normalWithControlBar");

            if (cornerRadius != cr)
            
                cornerRadius = cr;

                dropShadow.tlRadius = cornerRadius;
                dropShadow.trRadius = cornerRadius;
                dropShadow.blRadius = withControls ? cornerRadius : 0;
                dropShadow.brRadius = withControls ? cornerRadius : 0;

                setPartCornerRadii(topMaskRect, withControls); 
                setPartCornerRadii(border, withControls); 
                setPartCornerRadii(background, withControls);                
            

            if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls); 

            borderStroke.color = getStyle("borderColor");
            borderStroke.alpha = getStyle("borderAlpha");
            backgroundFill.color = getStyle("backgroundColor");
            backgroundFill.alpha = getStyle("backgroundAlpha");

            super.updateDisplayList(unscaledWidth, unscaledHeight);
        

        /**
         * @private
         */  
        private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
                    
            target.topLeftRadiusX = cornerRadius;
            target.topRightRadiusX = cornerRadius;
            target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
            target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
        

        private var cornerRadius:Number;
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>

    <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
    <!--- @private -->
    <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
                             angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>

    <!-- drop shadow can't be hittable so all other graphics go in this group -->
    <s:Group left="0" right="0" top="0" bottom="0">

        <!-- top group mask -->
        <!--- @private -->
        <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
            <!--- @private -->
            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>

        <!-- bottom group mask -->
        <!--- @private -->
        <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask" 
                 includeIn="normalWithControlBar, disabledWithControlBar">
            <!--- @private -->
            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>

        <!-- layer 1: 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>

        <!-- layer 2: background fill -->
        <!--- Defines the appearance of the PanelSkin class's background. -->
        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
            <s:fill>
                <!--- @private
                      Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
            </s:fill>
        </s:Rect>

        <!-- layer 3: contents -->
        <!--- Contains the vertical stack of titlebar content and controlbar. -->
        <s:Group left="1" right="1" top="1" bottom="1" id="contents">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>

            <!--- @private -->
<!--            <s:Group id="topGroup" mask="topGroupMask">
-->                
                <!-- layer 0: title bar fill -->
                <!--- @private -->
<!--                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0xE2E2E2" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
-->                
                <!-- layer 1: title bar highlight -->
                <!--- @private -->
<!--                <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
                    <s:stroke>
                        <s:LinearGradientStroke rotation="90" weight="1">
                            <s:GradientEntry color="0xEAEAEA" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradientStroke>
                    </s:stroke>
                </s:Rect>
-->                
                <!-- layer 2: title bar divider -->
                <!--- @private -->
<!--                <s:Rect id="tbDiv" left="0" right="0"  bottom="0">
                    <s:fill>
                        <s:SolidColor color="0xC0C0C0" />
                    </s:fill>
                </s:Rect>
-->                
                <!-- layer 3: text -->
                <!--- @copy spark.components.Panel#titleDisplay -->
<!--                <s:Label id="titleDisplay" maxDisplayedLines="1"
                         left="9" right="3" top="1" bottom="0" minHeight="30"
                         verticalAlign="middle" textAlign="start" fontWeight="bold">
                </s:Label>
-->
<!--            </s:Group>
-->            
            <!--
                Note: setting the minimum size to 0 here so that changes to the host component's
                size will not be thwarted by this skin part's minimum size.   This is a compromise,
                more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
            -->
            <!--- @copy spark.components.SkinnableContainer#contentGroup -->
            <s:Group id="contentGroup"   minWidth="0" minHeight="0">
            </s:Group>

            <!--- @private -->
            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                     includeIn="normalWithControlBar, disabledWithControlBar" >

                <s:Group left="0" right="0" top="0" bottom="0" mask="bottomGroupMask">

                    <!-- layer 0: control bar divider line -->
                    <s:Rect left="0" right="0" top="0"  alpha="0.22">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>

                    <!-- layer 1: control bar highlight -->
                    <s:Rect left="0" right="0" top="1" bottom="0">
                        <s:stroke>
                            <s:LinearGradientStroke rotation="90" weight="1">
                                <s:GradientEntry color="0xE5E5E5" />
                                <s:GradientEntry color="0xD8D8D8" />
                            </s:LinearGradientStroke>
                        </s:stroke>
                    </s:Rect>

                    <!-- layer 2: control bar fill -->
                    <s:Rect left="1" right="1" top="2" bottom="1">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0xDADADA" />
                                <s:GradientEntry color="0xC5C5C5" />
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                </s:Group>
                <!-- layer 3: control bar -->
                <!--- @copy spark.components.Panel#controlBarGroup -->
                <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                    <s:layout>
                        <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                    </s:layout>
                </s:Group>
            </s:Group>
        </s:Group>
    </s:Group>
</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">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:VGroup>
        <s:Panel />
        <s:Panel skinClass="PanelNoTitleBar"/>
    </s:VGroup>

</s:WindowedApplication>

第一个面板将显示原始皮肤;第二个面板显示自定义皮肤;没有标题栏。

【讨论】:

很好的答案。非常感谢!【参考方案2】:

剥皮是常见的建议,显然这是预期的设计。另一个答案很好地展示了这种方法。

但是,在相关问题上也有一个不错的子类化解决方案:Flex 4 spark Panel has an ugly gray top part。如果您只想删除标题栏,这可能就足够了。

【讨论】:

以上是关于Flex 4 Spark 组件面板 - 隐藏标题栏的主要内容,如果未能解决你的问题,请参考以下文章

在 Flex 4 面板的标题栏右侧添加图像

Flex 4.7:如何嵌入背景音乐和删除面板标题栏?

通过从 flex 中的另一个 mxml 文件访问组件来使组件不可见

访问 Spark 的面板标题栏

Flex 4.5:带有自定义 ItemRenderes 的 Spark DataGrid

Flex 4中的自定义视频搜索栏控制[关闭]