Flex中如何利用top, bottom, left, right, horizontalCenter和vertical

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


	　　

	　　复制代码

代码如下:


	　　<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"        layout="vertical"        verticalAlign="middle"        backgroundColor="white">     <mx:Style>        Form {            paddingLeft: 0;            paddingRight: 0;            paddingTop: 0;            paddingBottom: 0;        }    </mx:Style>     <mx:Script>        <![CDATA[            import mx.events.SliderEvent;             private function sliderLeft_change(evt:SliderEvent):void {                image.setStyle("left", sliderLeft.value);                image.setStyle("right", NaN);                sliderRight.value = 0;            }             private function sliderRight_change(evt:SliderEvent):void {                image.setStyle("right", sliderRight.value);                image.setStyle("left", NaN);                sliderLeft.value = 0;            }             private function sliderTop_change(evt:SliderEvent):void {                image.setStyle("top", sliderTop.value);                image.setStyle("bottom", NaN);                sliderBottom.value = 0;            }             private function sliderBottom_change(evt:SliderEvent):void {                image.setStyle("bottom", sliderBottom.value);                image.setStyle("top", NaN);                sliderTop.value = 0;            }        ]]>    </mx:Script>     <mx:Number id="MAX_WIDTH">{canvas.width - image.width}</mx:Number>    <mx:Number id="MAX_HEIGHT">{canvas.height - image.height}</mx:Number>     <mx:ApplicationControlBar dock="true">        <mx:Form>            <mx:FormItem label="left:" direction="horizontal">                <mx:HSlider id="sliderLeft"                        minimum="0"                        maximum="{MAX_WIDTH}"                        value="0"                        liveDragging="true"                        snapInterval="1"                        dataTipPrecision="0"                        showTrackHighlight="true"                        change="sliderLeft_change(event);" />                <mx:Label text="{sliderLeft.value}" />            </mx:FormItem>            <mx:FormItem label="right:" direction="horizontal">                <mx:HSlider id="sliderRight"                        minimum="0"                        maximum="{MAX_WIDTH}"                        value="0"                        liveDragging="true"                        snapInterval="1"                        dataTipPrecision="0"                        showTrackHighlight="true"                        change="sliderRight_change(event);" />                <mx:Label text="{sliderRight.value}" />            </mx:FormItem>            <mx:FormItem label="top:" direction="horizontal">                <mx:HSlider id="sliderTop"                        minimum="0"                        maximum="{MAX_HEIGHT}"                        liveDragging="true"                        snapInterval="1"                        dataTipPrecision="0"                        showTrackHighlight="true"                        change="sliderTop_change(event);" />                <mx:Label text="{sliderTop.value}" />            </mx:FormItem>            <mx:FormItem label="bottom:" direction="horizontal">                <mx:HSlider id="sliderBottom"                        minimum="0"                        maximum="{MAX_HEIGHT}"                        liveDragging="true"                        snapInterval="1"                        dataTipPrecision="0"                        showTrackHighlight="true"                        change="sliderBottom_change(event);" />                <mx:Label text="{sliderBottom.value}" />            </mx:FormItem>        </mx:Form>    </mx:ApplicationControlBar>     <mx:Canvas id="canvas" width="100%" height="100%">        <mx:Image id="image"                source="assets/bug.png"/>    </mx:Canvas> </mx:Application>