Flex4 背景设置

Flex的spark组件可以用skin来设置组件的背景，但是对于如果只想加个背景色，还要搞个skin 类来做，多少有点杀鸡用牛刀的赶脚，所以能否像Flex3中那样一个blackground就搞定呢？或者自己在组件中直接写个皮肤你？

如果用<s:Rect/>等来定义一块区域的颜色，那么你就只能用绝对定位，让其撑满整个组件。

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" 
			   minHeight="600" 
			   mouseUp="application1_mouseUpHandler(event)"
			   mouseOver="application1_mouseOverHandler(event)"
			   mouseDown="application1_mouseDownHandler(event)"
			   mouseOut="application1_mouseOutHandler(event)"
			   xmlns:render="com.render.*" xmlns:com="com.*">
	
	<fx:Script>
		<![CDATA[
			protected function button1_clickHandler(event:MouseEvent):void
			{
				currentState = currentState == "disable" ? "up" : "disable";
				
			}
			
			protected function application1_mouseUpHandler(event:MouseEvent):void
			{
				currentState = "over";
			}
			
			protected function application1_mouseOverHandler(event:MouseEvent):void
			{
				currentState = "over";
			}
			
			protected function application1_mouseDownHandler(event:MouseEvent):void
			{
				currentState = "press";
				
			}
			
			protected function application1_mouseOutHandler(event:MouseEvent):void
			{
				currentState = "up";
			}
		]]>
	</fx:Script>
	<s:states>
		<s:State name="over"/>
		<s:State name="up"/>
		<s:State name="press"/>
	</s:states>
	<mx:Text text="111111111111111111"/>
	<s:Rect id="border" left="0" right="0" top="0" bottom="0">
		<s:stroke>
			<s:SolidColorStroke weight="1" color="#00ffff"/>
		</s:stroke>
	</s:Rect>
	<s:Rect id="fill" left="10" right="10" top="10" bottom="10">
		<s:fill>
			<s:SolidColor id="backgroupColor" color.up="0xff0000" color.over="0xffff99" color.press="0x000000"/>
		</s:fill>
	</s:Rect>
	<mx:Text text="111111111111111111" fontSize="23"
			 x="{(this.width - test.width)/2}" y="{(this.height - test.height)/2}" 
			 id="test"/>
	<s:Button label="Click" click="button1_clickHandler(event)" top="10" left="10"/>
	<com:component width="100" height="100"/>
</s:Application>

 你也可用graphics来画图，因为graphics是每个显示组件的属性，它本来就属于最底层的，所以你不用担心层次结构。（对于application来说，不能用graphics来画背景）

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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>
	<fx:Script>
		<![CDATA[
			override public function validateDisplayList():void
			{
				super.validateDisplayList();
				this.graphics.clear();
				this.graphics.beginFill(0xff0000,0.5);
				this.graphics.drawRect(0,0,400,400);
				this.graphics.endFill();
			}
		]]>
	</fx:Script>
</s:Group>

 

 

评论

2 楼 luhantu 2014-12-05  

其实对于非常简单的背景色设置已经够用了……

1 楼 clschen 2014-12-04  

还有一个非主流的方式，直接设置opaqueBackground，但似乎只对内容区域有效，而且市场不怎么准确