Flex Gumbo中如何设置VerticalLayout间隙的例子

By Minidxer | September 10, 2009

接下来的Flex Gumbo中如何通过paddingLeft, paddingRight, paddingTop以及paddingBottom属性,设置VerticalLayout间隙。



下面是main.mxml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_VerticalLayout_padding_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.     <s:controlBarContent>
  7.         <mx:Form paddingTop="0" paddingBottom="0">
  8.             <mx:FormItem label="paddingLeft:">
  9.                 <s:HSlider id="sliderLeft"
  10.                            minimum="0"
  11.                            maximum="50"
  12.                            value="0" />
  13.             </mx:FormItem>
  14.             <mx:FormItem label="paddingRight:">
  15.                 <s:HSlider id="sliderRight"
  16.                            minimum="0"
  17.                            maximum="50"
  18.                            value="0" />
  19.             </mx:FormItem>
  20.             <mx:FormItem label="paddingTop:">
  21.                 <s:HSlider id="sliderTop"
  22.                            minimum="0"
  23.                            maximum="50"
  24.                            value="0" />
  25.             </mx:FormItem>
  26.             <mx:FormItem label="paddingBottom:">
  27.                 <s:HSlider id="sliderBottom"
  28.                            minimum="0"
  29.                            maximum="50"
  30.                            value="0" />
  31.             </mx:FormItem>
  32.         </mx:Form>
  33.     </s:controlBarContent>
  34.  
  35.     <s:Panel title="Spark Panel title"
  36.             width="90%" height="90%"
  37.             horizontalCenter="0" verticalCenter="0">
  38.         <s:layout>
  39.             <s:VerticalLayout paddingLeft="{sliderLeft.value}" paddingRight="{sliderRight.value}"
  40.                     paddingTop="{sliderTop.value}" paddingBottom="{sliderBottom.value}" />
  41.         </s:layout>
  42.         <s:Button id="btn1"
  43.                 label="Red"
  44.                 baseColor="red"
  45.                 width="100%" height="100%" />
  46.         <s:Button id="btn2"
  47.                 label="Orange"
  48.                 baseColor="haloOrange"
  49.                 width="100%" height="100%" />
  50.         <s:Button id="btn3"
  51.                 label="Yellow"
  52.                 baseColor="yellow"
  53.                 width="100%" height="100%" />
  54.         <s:Button id="btn4"
  55.                 label="Green"
  56.                 baseColor="haloGreen"
  57.                 width="100%" height="100%" />
  58.         <s:Button id="btn5"
  59.                 label="Blue"
  60.                 baseColor="haloBlue"
  61.                 width="100%" height="100%" />
  62.     </s:Panel>
  63.  
  64. </s:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

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

Search Posts