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>