博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Spacer控件

Posted on 2011-11-22 09:18  酸梅拯救地球  阅读(508)  评论(0)    收藏  举报

Spacer 控件可帮助您布置父容器中的子项。虽然 Spacer 控件不会绘制任何内容,但它会在父容器中为其本身分配空间。

在以下示例中,使用灵活的 Spacer 控件将 Button 控件推到右侧,以便 Button 控件与 HBox 容器的右边对齐:

  <mx:HBox>
      <mx:Image source="Logo.jpg"/>
      <mx:Label text="Company XYZ"/>
      <mx:Spacer width="100%"/>
      <mx:Button label="Close"/>
  </mx:HBox>

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Halo Spacer control. -->
<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">

    <s:Panel id="panel"
            title="Halo Spacer Control Example"
            width="75%" height="75%" 
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="10" right="10" top="10" bottom="10">
            <s:Label width="100%" color="blue" 
                    text="The Halo Spacer control pushes the second image to the right edge of the parent container."/>

            <s:HGroup width="100%">
                <mx:Image source="@Embed('assets/Nokia_6630.png')"/>
                <mx:Spacer width="100%"/>
                <mx:Image source="@Embed('assets/Nokia_6680.png')"/>
            </s:HGroup>
        </s:VGroup>
    </s:Panel>

</s:Application>