Flex4状态标签 - state的使用

2014-12-01 发布：hangge 阅读：888

1，flex4中，组件在不同状态除了可以设置相应的属性，还可以对应不同的事件除理程序。示例如下：

<?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" 
			   xmlns:local="*">
	<s:states>
		<s:State name="blue"/>
		<s:State name="orange"/>
	</s:states>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Button label="切换颜色"
		click.blue="currentState='orange'" click.orange="currentState='blue'"/>
	<s:Rect width="200" height="200">
		<s:fill>
			<s:SolidColor color.blue="0x0000ff" color.orange="0xde7800"/>
		</s:fill>
	</s:Rect>
</s:Application>

2，对于多个state还可以使用stateGroups来设置状态组。示例如下：

<?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" 
			   xmlns:local="*">
	<s:states>
		<s:State name="blue" stateGroups="group1"/>
		<s:State name="orange" stateGroups="group1"/>
		<s:State name="black" stateGroups="group2"/>
	</s:states>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Button label="切换"
			  click.blue="currentState='orange'" 
			  click.orange="currentState='black'"
			  click.black="currentState='blue'"/>
	<s:Rect width="200" height="200"
			visible.group1="true" visible.group2="false">
		<s:fill>
			<s:SolidColor color.blue="0x0000ff" color.orange="0xde7800"/>
		</s:fill>
	</s:Rect>
</s:Application>

3，组件可以通过设置includeIn或excludeFrom属性对应与不同的state下，该组件是否包含或者移除。示例如下：

<?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" 
			   xmlns:local="*">
	<s:states>
		<s:State name="rect"/>
		<s:State name="ellipse"/>
	</s:states>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>.
	<s:Button label="切换"
			  click.rect="currentState='ellipse'" 
			  click.ellipse="currentState='rect'"/>
	<s:Rect width="200" height="200"
			includeIn="rect">
		<s:fill>
			<s:SolidColor color="0x0000ff"/>
		</s:fill>
	</s:Rect>
	<s:Ellipse width="200" height="200"
			includeIn="ellipse">
		<s:fill>
			<s:SolidColor color="0x0000ff"/>
		</s:fill>
	</s:Ellipse>
</s:Application>

4，组件itemCreationPolicy属性默认值为deferred，表示仅在需要的时候创建改元素。设置成immediate表示立即创建。代码如下：

<s:Ellipse width="200" height="200" includeIn="ellipse" itemCreationPolicy="immediate">

5，状态事件。
组件可监听currentStateChanging和currentStateChange事件，分别表示该组件状态开始改变和改变完毕。

state标签可监听enterState和exitState事件，分别表示进入和退出该状态。

<?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" 
			   currentStateChanging="showLog('changing: '+currentState)"
			   currentStateChange="showLog('change: '+currentState)">
	<fx:Script>
		<![CDATA[
			protected function showLog(text:String):void
			{
				log.text += text + "\n";
			}
		]]>
	</fx:Script>
	<s:states>
		<s:State name="rect"
				 enterState="showLog('--rect enter')"
				 exitState="showLog('--rect exit')"/>
		<s:State name="ellipse"/>
	</s:states>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Button label="切换"
			  click.rect="currentState='ellipse'" 
			  click.ellipse="currentState='rect'"/>
	<s:TextArea id="log" width="300" height="150"/>
</s:Application>