学步园

   以下代码展示了如何设置panel(或者其他容器)的padding样式 通过 the paddingLeft, paddingRight, paddingTop and/or paddingBottom properties.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/20/setting-padding-on-a-spark-verticallayout-in-flex-gumbo/ -->
<s:Application name="Spark_VerticalLayout_padding_test"
        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:controlBarContent>
        <mx:Form paddingTop="0" paddingBottom="0">
            <mx:FormItem label="paddingLeft:">
                <s:HSlider id="sliderLeft"
                           minimum="0"
                           maximum="50"
                           value="0" />
            </mx:FormItem>
            <mx:FormItem label="paddingRight:">
                <s:HSlider id="sliderRight"
                           minimum="0"
                           maximum="50"
                           value="0" />
            </mx:FormItem>
            <mx:FormItem label="paddingTop:">
                <s:HSlider id="sliderTop"
                           minimum="0"
                           maximum="50"
                           value="0" />
            </mx:FormItem>
            <mx:FormItem label="paddingBottom:">
                <s:HSlider id="sliderBottom"
                           minimum="0"
                           maximum="50"
                           value="0" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>

    <s:Panel title="Spark Panel title"
            width="90%" height="90%"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout paddingLeft="{sliderLeft.value}" paddingRight="{sliderRight.value}"
                    paddingTop="{sliderTop.value}" paddingBottom="{sliderBottom.value}" />
        </s:layout>
        <s:Button id="btn1"
                label="Red"
                baseColor="red"
                width="100%" height="100%" />
        <s:Button id="btn2"
                label="Orange"
                baseColor="haloOrange"
                width="100%" height="100%" />
        <s:Button id="btn3"
                label="Yellow"
                baseColor="yellow"
                width="100%" height="100%" />
        <s:Button id="btn4"
                label="Green"
                baseColor="haloGreen"
                width="100%" height="100%" />
        <s:Button id="btn5"
                label="Blue"
                baseColor="haloBlue"
                width="100%" height="100%" />
    </s:Panel>
</s:Application>

有demo地址 http://dl.dropbox.com/u/4509565/FlexExamples_com/Spark_VerticalLayout_padding_test/main.html
dropbox的 得自己翻墙看

转载自Setting padding on a Spark VerticalLayout in Flex 4 | Flex Examples