Flex中通过visible和includeInLayout属性设置控件容器的显示与隐藏的例子

By Minidxer | August 2, 2008

实现的效果和前面的Flex中如何显示与隐藏容器/控件的例子一样，接下来的例子演示了Flex中如何通过visible和includeInLayout属性，设置控件容器的显示与隐藏。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整实现代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:transitions>
  8.         <mx:Transition fromState="*" toState="*">
  9.             <mx:Parallel targets="{[vbox2]}">
  10.                 <mx:WipeDown />
  11.                 <mx:Fade />
  12.             </mx:Parallel>
  13.         </mx:Transition>
  14.     </mx:transitions>
  15.  
  16.     <mx:states>
  17.         <mx:State name="expanded">
  18.             <mx:AddChild relativeTo="{vbox1}" position="after">
  19.                 <mx:VBox id="vbox2"
  20.                         width="120"
  21.                         height="100%"
  22.                         backgroundColor="haloGreen">
  23.                     <mx:Label text="VBox 2" />
  24.                 </mx:VBox>
  25.             </mx:AddChild>
  26.         </mx:State>
  27.     </mx:states>
  28.  
  29.     <mx:Style>
  30.         VBox {
  31.             paddingLeft: 10;
  32.             paddingRight: 10;
  33.             paddingTop: 10;
  34.             paddingBottom: 10;
  35.         }
  36.     </mx:Style>
  37.  
  38.     <mx:Script>
  39.         <![CDATA[
  40.             import mx.effects.easing.*;
  41.  
  42.             [Bindable]
  43.             [Embed(source="assets/help.png")]
  44.             private var helpIcon:Class;
  45.  
  46.             private function toggleExpanded():void {
  47.                 switch (currentState) {
  48.                     case "expanded":
  49.                         currentState = "";
  50.                         break;
  51.                     default:
  52.                         currentState = "expanded";
  53.                         break;
  54.                 }
  55.             }
  56.         ]]>
  57.     </mx:Script>
  58.  
  59.     <mx:HBox width="100%" height="100%">
  60.         <mx:VBox id="vbox1"
  61.                 width="120"
  62.                 height="100%"
  63.                 backgroundColor="haloOrange">
  64.             <mx:Label text="VBox 1" />
  65.             <mx:Button label="Help"
  66.                        icon="{helpIcon}"
  67.                     click="toggleExpanded()" />
  68.         </mx:VBox>
  69.  
  70.         <mx:VBox id="vbox3"
  71.                 width="100%"
  72.                 height="100%"
  73.                 backgroundColor="haloBlue">
  74.             <mx:Label text="VBox 3" />
  75.         </mx:VBox>
  76.     </mx:HBox>
  77.  
  78. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | No Comments » | 775 views Tags: , , , , , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll