Question

我尝试根据操作系统设置特定的窗口皮肤。

见下面我的皮肤。

    <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"
         xmlns:Layout="skin.Layout.*"
         alpha.disabledGroup="0.5"
         creationComplete="sparkskin1_creationCompleteHandler(event)">

<fx:Metadata>
    [HostComponent("fr.inter.ui.windowSkin.wCustomWindow")]
</fx:Metadata>


<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        protected function btResize_mouseDownHandler(event:MouseEvent):void
        {
            btResize.addEventListener( MouseEvent.MOUSE_UP, btResize_mouseUpHandler );
            stage.nativeWindow.startResize();
        }

        protected function btResize_mouseOutHandler(event:MouseEvent):void
        {
            btResize.removeEventListener( MouseEvent.MOUSE_OUT, btResize_mouseOutHandler );             
        }


        protected function btResize_mouseUpHandler(event:MouseEvent):void
        {
            btResize.removeEventListener( MouseEvent.MOUSE_UP, btResize_mouseUpHandler );



        }

        protected function sparkskin1_creationCompleteHandler(event:FlexEvent):void
        {

            if (NativeApplication.supportsDockIcon)
            {
                this.currentState = "supportsDockIcon";//mac
            }
            else
            {
                this.currentState = "supportsSystemTray";
            }
        }


    ]]>
</fx:Script>


<s:states>
    <s:State name="disabledAndInactive" stateGroups="disabledGroup, inactiveGroup" />
    <s:State name="maximizedGroup"/>
    <s:State name="normal" />
    <s:State name="disabled" stateGroups="disabledGroup" />
    <s:State name="normalAndInactive" stateGroups="inactiveGroup" />
    <s:State name="supportsDockIcon" />
    <s:State name="supportsSystemTray"/>
</s:states>

<s:Rect id="backgroundRect"
        left="0"
        right="0"
        top="0"
        bottom="0"
        alpha="0"
        >
    <s:fill>
        <s:SolidColor alpha="0"/>
    </s:fill>
</s:Rect>

<s:Group bottom="0" left="0" right="0"
         top="0"  
         >
    <!--Fond de la fenetre-->
    <s:Rect bottom="0" left="0" right="0"
            top="0"
            radiusX="8" radiusY="8" >
        <s:fill>
            <s:SolidColor color="#656565" alpha=".7" />
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="#666666" />
        </s:stroke>
    </s:Rect>

    <s:Group height="38" id="moveArea"
             left="0" right="0" >

        <!--Barre bleu avec filet-->
        <s:Rect  height="25" left="10" right="10" top="10">
            <s:fill>
                <s:SolidColor color="#055a90" />
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="#666666" />
            </s:stroke>
        </s:Rect>


        <s:BitmapImage id="icon"
                       left.supportsSystemTray="5" right.supportsDockIcon="5"
                       verticalCenter="0" />

        <s:Label id="titleDisplay"
                 styleName="swindowTitle"
                 left.supportsSystemTray="60" left.supportsDockIcon="{this.width/2}"
                 top="18" verticalAlign="middle" horizontalCenter="0"
                 />

        <!--Zone de bouton-->

        <s:HGroup right.supportsSystemTray="12" left.supportsDockIcon="12" verticalCenter="0">

            <s:Button id="btMinimize" buttonMode="true" 
                      skinClass.supportsSystemTray="skin.components.MinimizeButtonSkin"
                      skinClass.supportsDockIcon="skin.components.MinimizeButtonSkinM"
                      verticalCenter="0"/>

            <s:Button id="btMaximize" buttonMode="true" 
                      skinClass.supportsSystemTray="skin.components.MaximizeButtonSkin"
                      skinClass.supportsDockIcon="skin.components.MaximizeButtonSkinM"
                      verticalCenter="0"/>

            <s:Button id="closeButton" buttonMode="true" 
                      skinClass.supportsSystemTray="skin.components.CloseButtonSkin"
                      skinClass.supportsDockIcon="skin.components.CloseButtonSkinM"
                      verticalCenter="0"/>

        </s:HGroup>

    </s:Group>

    <!--Fond de la zone principale-->

    <s:Rect id="background" left="10" top="35" right="10" bottom="10">
        <s:fill>
            <s:LinearGradient rotation="-90">
                <s:GradientEntry color="#edf0f7"/>
                <s:GradientEntry color="#fcfbfb" />
            </s:LinearGradient>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="#666666" />
        </s:stroke>
    </s:Rect>

    <!--Zone dans laquelle les elements vont se positionner-->


    <s:Group id="contentGroup" left="15" right="15" top="43" bottom="15" minWidth="0"
             minHeight="0" width="100%" height="100%">

    </s:Group>



</s:Group>
<s:Button height="15" id="btResize" width="15"
          bottom="0" right="0"
          skinClass="spark.skins.spark.windowChrome.GripperSkin" 
          mouseDown="btResize_mouseDownHandler(event)"
          buttonMode="true"/>

当Windows加载时，按钮显示效果很好。但是如果窗口被取消激活，激活后会出现MacOs和Windows按钮。

我不知道如何解决这个问题，你能帮助我吗？

由于

Answer 1

您不应该直接在皮肤中设置皮肤currentState，因为hostComponent应该照顾它。当您停用并重新激活Window时，hostComponent会将Skin状态设置回其原始状态之一（例如normal），因此忽略您的两个自定义状态。

如果要根据特定条件设置Skin的状态，则应覆盖hostComponent的getCurrentSkinState()方法。但在这种特殊情况下，我认为这不是正确的方法，因为它太复杂了。

我认为最简单的解决方案是覆盖Skin的updateDisplayList()方法来定位元素。这是一种负责正确显示Skin中所有元素的方法。

<fx:Script>
    <![CDATA[
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if (NativeApplication.supportsDockIcon) {
                titleDisplay.left = width / 2;
                //position other elements for mac
            }
            else {
                titleDisplay.left = 60;
                //position other elements for win
            }
        }
    ]]>
</fx:Script>

另一种 - 甚至可能更好 - 的方法是创建两个单独的Skin（一个用于Mac，一个用于Windows）并将正确的Skin应用于Windows。这将使我们不断检查if / else功能。

操作系统的窗口皮肤

1 个答案: