Flex中如何通过paddingLeft, paddingRight, paddingTop, paddingBottom和horizontalGap样式调整Button的标签和图标的各填充距离的例子

By Minidxer | January 25, 2009

接下来的例子演示了Flex中如何通过paddingLeft, paddingRight, paddingTop, paddingBottom和horizontalGap样式，调整Button的标签和图标的各填充距离。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">
  7.  
  8.     <mx:Style>
  9.         HSlider {
  10.             labelOffset: 0;
  11.             dataTipPlacement: right;
  12.         }
  13.  
  14.         .iconButton {
  15.             icon: Embed("bullet_picture.png");
  16.         }
  17.     </mx:Style>
  18.  
  19.     <mx:Script>
  20.         <![CDATA[
  21.             private function init():void {
  22.                 leftSlider.value = button.getStyle("paddingLeft");
  23.                 rightSlider.value = button.getStyle("paddingRight");
  24.                 topSlider.value = button.getStyle("paddingTop");
  25.                 bottomSlider.value = button.getStyle("paddingBottom");
  26.                 horizontalGapSlider.value = button.getStyle("horizontalGap");
  27.             }
  28.  
  29.             private function updatePadding():void {
  30.                 button.setStyle("paddingLeft", leftSlider.value);
  31.                 button.setStyle("paddingRight", rightSlider.value);
  32.                 button.setStyle("paddingTop", topSlider.value);
  33.                 button.setStyle("paddingBottom", bottomSlider.value);
  34.                 button.setStyle("horizontalGap", horizontalGapSlider.value);
  35.             }
  36.         ]]>
  37.     </mx:Script>
  38.  
  39.     <mx:Array id="labelArr">
  40.         <mx:Number>0</mx:Number>
  41.         <mx:Number>4</mx:Number>
  42.         <mx:Number>8</mx:Number>
  43.         <mx:Number>12</mx:Number>
  44.         <mx:Number>16</mx:Number>
  45.     </mx:Array>
  46.  
  47.     <mx:ApplicationControlBar dock="true">
  48.         <mx:Form styleName="plain">
  49.             <mx:FormItem label="paddingLeft:">
  50.                 <mx:HSlider id="leftSlider"
  51.                         minimum="0"
  52.                         maximum="16"
  53.                         snapInterval="1"
  54.                         labels="{labelArr}"
  55.                         liveDragging="true"
  56.                         showTrackHighlight="true"
  57.                         change="updatePadding();" />
  58.             </mx:FormItem>
  59.             <mx:FormItem label="paddingRight:">
  60.                 <mx:HSlider id="rightSlider"
  61.                         minimum="0"
  62.                         maximum="16"
  63.                         labels="{labelArr}"
  64.                         snapInterval="1"
  65.                         liveDragging="true"
  66.                         showTrackHighlight="true"
  67.                         change="updatePadding();" />
  68.             </mx:FormItem>
  69.             <mx:FormItem label="paddingTop:">
  70.                 <mx:HSlider id="topSlider"
  71.                         minimum="0"
  72.                         maximum="16"
  73.                         labels="{labelArr}"
  74.                         snapInterval="1"
  75.                         liveDragging="true"
  76.                         showTrackHighlight="true"
  77.                         change="updatePadding();" />
  78.             </mx:FormItem>
  79.             <mx:FormItem label="paddingBottom:">
  80.                 <mx:HSlider id="bottomSlider"
  81.                         minimum="0"
  82.                         maximum="16"
  83.                         labels="{labelArr}"
  84.                         snapInterval="1"
  85.                         liveDragging="true"
  86.                         showTrackHighlight="true"
  87.                         change="updatePadding();" />
  88.             </mx:FormItem>
  89.             <mx:FormItem label="horizontalGap:">
  90.                 <mx:HSlider id="horizontalGapSlider"
  91.                         minimum="0"
  92.                         maximum="16"
  93.                         labels="{labelArr}"
  94.                         snapInterval="1"
  95.                         liveDragging="true"
  96.                         showTrackHighlight="true"
  97.                         change="updatePadding();" />
  98.             </mx:FormItem>
  99.         </mx:Form>
  100.     </mx:ApplicationControlBar>
  101.  
  102.     <mx:Button id="button" label="label" styleName="iconButton" />
  103.  
  104. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Button | No Comments » | 1,458 views Tags: , , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll