flex学习笔记-布局
flex中设置图片平铺
<mx:Image source="assets/images/main.jpg" width="500" height="500" maintainAspectRatio="false" />
<s:Image source="assets/images/main.jpg" width="500" height="500" scaleMode="stretch" />
flex填充：
<s:Group includeIn="login" top="0" bottom="0" left="0" right="0">
<s:Rect width="100%" height="100%">
<s:fill>
<s:BitmapFill source="@Embed('assets/images/main.jpg')"/>
</s:fill>
</s:Rect>
</s:Group>
这里如果把embed取消掉，就不会填充任何东西，不知道什么原因？
<s:Group top="0" bottom="0" left="0" right="0">
<s:Rect width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="0xbc276a" weight="2"/>
</s:stroke>
<s:fill>
<s:RadialGradient>
<s:entries>
<s:GradientEntry color="0xECEC21" ratio="0.66" alpha="0.5"/>
</s:entries>
</s:RadialGradient>
</s:fill>
</s:Rect>
</s:Group>
stroke表示边框
fill就是填充色了
GradientEntry中的ratio不太明白啥意思
下面是一个弹出框：
本来可以不添加group来填充颜色的，由于我重写了bordercontainer的皮肤，导致这里再设置bgcolor不起作用，还不知道什么原因？
<?xml version="1.0" encoding="utf-8"?><s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()" backgroundColor="{labelBackColor}" backgroundAlpha="0.9" borderAlpha="0" cornerRadius="5" mouseDownOutside="removeHandler()" mouseWheelOutside="removeHandler()" width="160" height="80"><s:states><s:State name="messageAlert"/></s:states><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><fx:Script><![CDATA[import cn.dnr.Constants;import mx.managers.PopUpManager;[Bindable]/***显示提示消息*/public var label:String ;[Bindable]public var labelColor:uint = 0x000000;[Bindable]public var labelFontSize:Number = 14;[Bindable]public var labelBackColor:uint = 0x841553;private function init():void{TimerDelay();}public function TimerDelay():void{currentState = "messageAlert";var myTimer:Timer = new Timer(Constants.ALERTTIME);myTimer.addEventListener("timer", timerHandler);myTimer.start();}public function timerHandler(event:TimerEvent):void {removeHandler();}protected function removeHandler():void{PopUpManager.removePopUp(this);}]]></fx:Script><!--提示对话窗口--><s:Group top="0" bottom="0" left="0" right="0"><s:Rect width="100%" height="100%"><s:stroke><s:SolidColorStroke color="0xbc276a" weight="2"/></s:stroke><s:fill><s:RadialGradient><s:entries><s:GradientEntry color="0xECEC21" ratio="0.66" alpha="0.5"/></s:entries></s:RadialGradient></s:fill></s:Rect></s:Group><s:Group top="10" bottom="10" left="20" right="20"><s:Rect width="100%" height="100%"><s:fill><s:RadialGradient><s:entries><s:GradientEntry color="0x0056FF" ratio="0.00" alpha="0.5"/></s:entries></s:RadialGradient></s:fill></s:Rect></s:Group><s:VGroup includeIn="messageAlert" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"><s:Label text="{label}" color="{labelColor}" fontSize="{labelFontSize}"/></s:VGroup></s:BorderContainer><?xml version="1.0" encoding="utf-8"?><s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" skinname="code"><?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" blendMode="normal" mouseEnabled="false" minWidth="176" minHeight="76" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5"><fx:Metadata><![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent*/[HostComponent("spark.components.TitleWindow")]]]></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", "border"];/* exclusions before Flex 4.5 for backwards-compatibility purposes */static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup"];/** * @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.5if (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" ||currentState == "inactiveWithControlBar");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=5;]]></fx:Script><s:states><s:State name="normal" /><s:State name="inactive" stateGroups="inactiveGroup" /><s:State name="disabled" /><s:State name="normalWithControlBar" stateGroups="withControls" /><s:State name="inactiveWithControlBar" stateGroups="withControls, inactiveGroup" /><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" alpha.inactiveGroup="0.22" distance="11" distance.inactiveGroup="7" angle="90" color="0x000000" 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="withControls"><!--- @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><!--- Defines the TitleWindowSkin class's border stroke. The default value is 1. --><s:SolidColorStroke id="borderStroke" weight="1" /></s:stroke></s:Rect><!-- layer 2: background fill --><!--- Defines the appearance of the TitleWindowSkin class's background. --><s:Rect id="background" left="1" top="1" right="1" bottom="1"><s:fill><!--- Defines the TitleWindowSkin 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 title bar content and control bar. --><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="0x3399CC" color.inactiveGroup="0x99aaaa"/><s:GradientEntry color="0x0066aa" color.inactiveGroup="0x808080"/><!---<s:GradientEntry color="0xD2D2D2" color.inactiveGroup="0xEAEAEA"/><s:GradientEntry color="0x9A9A9A" color.inactiveGroup="0xCECECE"/>--></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="0xE6E6E6" /><s:GradientEntry color="0xFFFFFF" alpha="0.22"/></s:LinearGradientStroke></s:stroke><s:fill><s:LinearGradient rotation="90"><s:GradientEntry color="0xFFFFFF" alpha="0.15" /><s:GradientEntry color="0xFFFFFF" alpha="0.15" ratio="0.44"/><s:GradientEntry color="0xFFFFFF" alpha="0" ratio="0.4401"/></s:LinearGradient></s:fill></s:Rect><!--- layer 2: title bar divider @private --><s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0" ><s:fill><s:SolidColor color="0x000000" alpha="0.75" /></s:fill></s:Rect><!-- layer 3: text --><!--- @copy spark.components.Panel#titleDisplay --><s:Label id="titleDisplay" maxDisplayedLines="1" left="9" right="36" top="1" bottom="0" minHeight="30" verticalAlign="middle" fontWeight="bold" /><!-- layer 4: moveArea --><!--- @copy spark.components.TitleWindow#moveArea --><s:Group id="moveArea" left="0" right="0" top="0" bottom="0" /><!--- @copy spark.components.TitleWindow#closeButton <s:Image id="btnMax" toolTip="最大化" source="assets\images\Buttonmaximize.png" width="18" height="18" right="27" top="7"/><s:Image id="btnRestore" visible="false" toolTip="还原" source="assets\images\Buttonrestore.png" width="18" height="18" right="27" top="7"/>--><s:Image id="btnMin" toolTip="最小化" source="assets\images\Buttonminimize.png" width="18" height="18" right="27" top="7"/><s:Button id="closeButton" skinheight="15" right="7" top="7" /></s:Group><!--Note: setting the minimum size to 0 here so that changes to the host component'ssize 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" width="100%" height="100%" minWidth="0" minHeight="0"></s:Group><!--- @private --><s:Group id="bottomGroup" minWidth="0" minHeight="0" includeIn="withControls"> <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" height="1" 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="0xFFFFFF" /><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="0xEDEDED"/><s:GradientEntry color="0xCDCDCD"/></s:LinearGradient></s:fill></s:Rect></s:Group><!--- @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>