Flex4状态标签 - state的使用
1,flex4中,组件在不同状态除了可以设置相应的属性,还可以对应不同的事件除理程序。示例如下:
2,对于多个state还可以使用stateGroups来设置状态组。示例如下:
3,组件可以通过设置includeIn或excludeFrom属性对应与不同的state下,该组件是否包含或者移除。示例如下:
4,组件itemCreationPolicy属性默认值为deferred,表示仅在需要的时候创建改元素。设置成immediate表示立即创建。代码如下:
5,状态事件。
组件可监听currentStateChanging和currentStateChange事件,分别表示该组件状态开始改变和改变完毕。
<?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>
<?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>
<?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>
<s:Ellipse width="200" height="200" includeIn="ellipse" itemCreationPolicy="immediate">
组件可监听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>