Flex中如何利用top, bottom, left, right, horizontalCenter和verticalCenter样式放置某固定项目的例子

By Minidxer | October 4, 2008

接下来的例子演示了Flex中如何利用top, bottom, left, right, horizontalCenter和verticalCenter样式，放置某固定项目。

让我们先来看一下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.         Form {
  9.             paddingLeft: 0;
  10.             paddingRight: 0;
  11.             paddingTop: 0;
  12.             paddingBottom: 0;
  13.         }
  14.     </mx:Style>
  15.  
  16.     <mx:Script>
  17.         <![CDATA[
  18.             import mx.events.SliderEvent;
  19.  
  20.             private function sliderLeft_change(evt:SliderEvent):void {
  21.                 image.setStyle("left", sliderLeft.value);
  22.                 image.setStyle("right", NaN);
  23.                 sliderRight.value = 0;
  24.             }
  25.  
  26.             private function sliderRight_change(evt:SliderEvent):void {
  27.                 image.setStyle("right", sliderRight.value);
  28.                 image.setStyle("left", NaN);
  29.                 sliderLeft.value = 0;
  30.             }
  31.  
  32.             private function sliderTop_change(evt:SliderEvent):void {
  33.                 image.setStyle("top", sliderTop.value);
  34.                 image.setStyle("bottom", NaN);
  35.                 sliderBottom.value = 0;
  36.             }
  37.  
  38.             private function sliderBottom_change(evt:SliderEvent):void {
  39.                 image.setStyle("bottom", sliderBottom.value);
  40.                 image.setStyle("top", NaN);
  41.                 sliderTop.value = 0;
  42.             }
  43.         ]]>
  44.     </mx:Script>
  45.  
  46.     <mx:Number id="MAX_WIDTH">{canvas.width - image.width}</mx:Number>
  47.     <mx:Number id="MAX_HEIGHT">{canvas.height - image.height}</mx:Number>
  48.  
  49.     <mx:ApplicationControlBar dock="true">
  50.         <mx:Form>
  51.             <mx:FormItem label="left:" direction="horizontal">
  52.                 <mx:HSlider id="sliderLeft"
  53.                         minimum="0"
  54.                         maximum="{MAX_WIDTH}"
  55.                         value="0"
  56.                         liveDragging="true"
  57.                         snapInterval="1"
  58.                         dataTipPrecision="0"
  59.                         showTrackHighlight="true"
  60.                         change="sliderLeft_change(event);" />
  61.                 <mx:Label text="{sliderLeft.value}" />
  62.             </mx:FormItem>
  63.             <mx:FormItem label="right:" direction="horizontal">
  64.                 <mx:HSlider id="sliderRight"
  65.                         minimum="0"
  66.                         maximum="{MAX_WIDTH}"
  67.                         value="0"
  68.                         liveDragging="true"
  69.                         snapInterval="1"
  70.                         dataTipPrecision="0"
  71.                         showTrackHighlight="true"
  72.                         change="sliderRight_change(event);" />
  73.                 <mx:Label text="{sliderRight.value}" />
  74.             </mx:FormItem>
  75.             <mx:FormItem label="top:" direction="horizontal">
  76.                 <mx:HSlider id="sliderTop"
  77.                         minimum="0"
  78.                         maximum="{MAX_HEIGHT}"
  79.                         liveDragging="true"
  80.                         snapInterval="1"
  81.                         dataTipPrecision="0"
  82.                         showTrackHighlight="true"
  83.                         change="sliderTop_change(event);" />
  84.                 <mx:Label text="{sliderTop.value}" />
  85.             </mx:FormItem>
  86.             <mx:FormItem label="bottom:" direction="horizontal">
  87.                 <mx:HSlider id="sliderBottom"
  88.                         minimum="0"
  89.                         maximum="{MAX_HEIGHT}"
  90.                         liveDragging="true"
  91.                         snapInterval="1"
  92.                         dataTipPrecision="0"
  93.                         showTrackHighlight="true"
  94.                         change="sliderBottom_change(event);" />
  95.                 <mx:Label text="{sliderBottom.value}" />
  96.             </mx:FormItem>
  97.         </mx:Form>
  98.     </mx:ApplicationControlBar>
  99.  
  100.     <mx:Canvas id="canvas" width="100%" height="100%">
  101.         <mx:Image id="image"
  102.                 source="assets/bug.png"/>
  103.     </mx:Canvas>
  104.  
  105. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Other | No Comments » | Tags: , , , , , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll