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

接下来的例子演示了Flex中如何利用, bottom, left, right, horizontalCenter和verticalCenter样式，放置某固定项目。
复制代码
代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://.adobe./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("", sliderTop.value);
                image.setStyle("bottom", NaN);
                sliderBottom.value = 0;
            }
 
            private function sliderBottom_change(evt:SliderEvent):void {
                image.setStyle("bottom", sliderBottom.value);
                image.setStyle("", 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=":" 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>