flex4透过Resize效果实现Panel状态变换

flex4通过Resize效果实现Panel状态变换

情景：3个Panel，初始情景，显示一个main panel，点击Panel中的2个按钮，会通过Resize分别显示panel1，panel2。即：main panel+panel1，或者main panel+panel2的2种显示情景。点击main panel的最大化，可以恢复到初始情景。

<!--先定义3个状态-->
<s:states>
      <s:State name="default"/>
      <s:State name="panel1"/>
      <s:State name="panel2"/>
</s:states>

<!--3个面板，在main panel中定义resize的效果,通过click进行状态的变化-->
<s:Panel  height="100%"  width="100%"  title="main panel" resize="Resize">
      <s:Button  click="currentState='panel1'"/>
      <s:Button  click="currentState='panel2'"/>
      <s:Button  click="currentState='default'"/>
</s:Panel>

<s:Panel width="300"  height="100%"  title="panel1" includeIn="panel1"/>

<s:Panel  width="300" height="100%"  title="panel2" includeIn="panel2"/>

效果图：

1.初始情景：

 

2.点击按钮1或者按钮2

 

3.点击default按钮，回复到最初始状态：

 

实现有2个关键点：

1.组件的resize效果，这个效果能够根据当前状态，自动帮你resize面板尺寸

2.状态的定义，这里需要有三个状态，就需要定义3种状态，还要注意，flex4中需要以“includeIn=‘state’”这种形式绑定状态。