Flex中如何显示与隐藏容器/控件的例子

By Minidxer | August 2, 2008

接下来的例子演示了Flex中如何对VBox进行显示与隐藏操作。

让我们先来看一下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:Style>
  8.         VBox {
  9.             paddingLeft: 10;
  10.             paddingRight: 10;
  11.             paddingTop: 10;
  12.             paddingBottom: 10;
  13.         }
  14.     </mx:Style>
  15.  
  16.     <mx:Script>
  17.         <![CDATA[
  18.             [Bindable]
  19.             [Embed(source="assets/help.png")]
  20.             private var helpIcon:Class;
  21.         ]]>
  22.     </mx:Script>
  23.  
  24.     <mx:HBox width="100%" height="100%">
  25.         <mx:VBox id="vbox1"
  26.                 width="120"
  27.                 height="100%"
  28.                 backgroundColor="haloOrange">
  29.             <mx:Label text="VBox 1" />
  30.             <mx:Button label="Help"
  31.                     icon="{helpIcon}"
  32.                     click="vbox2.visible = !vbox2.visible" />
  33.         </mx:VBox>
  34.  
  35.         <mx:VBox id="vbox2"
  36.                 width="120"
  37.                 height="100%"
  38.                 backgroundColor="haloGreen"
  39.                 creationComplete="vbox2.visible = false"
  40.                 includeInLayout="{vbox2.visible}">
  41.             <mx:Label text="VBox 2" />
  42.         </mx:VBox>
  43.  
  44.         <mx:VBox id="vbox3"
  45.                 width="100%"
  46.                 height="100%"
  47.                 backgroundColor="haloBlue">
  48.             <mx:Label text="VBox 3" />
  49.         </mx:VBox>
  50.     </mx:HBox>
  51.  
  52. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: ,

Related Post

3 comments | Add One

  1. cin - 08/3/2008 at 8:52 am

    To download the Flex 3 SDK, navigate to the following URL:
    http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3/

    Download the latest nightly build. You can download either of the available SDK types (Adobe Flex SDK, Open Source Flex SDK, or Adobe Add-ons — see the previous list for explanations between the differnt types). For this example I am downloading the latest nightly build of the Adobe Flex SDK.

    Save the nightly build to your hard drive and extract the files from the .ZIP file

    In Flex Builder 3, select Window > Preferences from the main menu to open the Flex Builder

    apply your changes and add the new Flex SDK. If you want to set the newly downloaded SDK as your default SDK, click the check box to the left of the SDK name. Click OK to dismiss this dialog.

    Also worth mentioning is that you can manage your installed SDKs via the Project Properties dialog menu by clicking the Configure Flex SDKs link, which takes you to the Installed Flex SDKs preferences.

    Happy Flexing!

  2. cin - 08/3/2008 at 8:53 am

    To download the Flex 3 SDK, navigate to the following URL:
    http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3/

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads