Jun 27

在前面的Flex中通过设置labelPlacement属性设置RadioButton控件文本标签排列位置的例子中我们利用labelPlacement属性,设置了RadioButton控件文本标签排列位置。其实同样的属性在按钮控件(Button)中也一样可以使用,利用按钮控件(Button)中的labelPlacement属性,我们可以指定一个图标(icon)在按钮中的位置。

让我们先来看一下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" layout="vertical" verticalAlign="middle" backgroundColor="white">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import mx.controls.ButtonLabelPlacement;
  7.  
  8.             [Bindable]
  9.             [Embed('assets/flex_icon.gif')]
  10.             private var Icon:Class;
  11.         ]]>
  12.     </mx:Script>
  13.  
  14.     <mx:Label text="Button.labelPlacement" />
  15.     <mx:HBox>
  16.         <mx:Button id="bLeft"
  17.                 width="120" height="100"
  18.                 icon="{Icon}"
  19.                 labelPlacement="{bLeft.label}"
  20.                 label="{ButtonLabelPlacement.LEFT}" />
  21.  
  22.         <mx:Button id="bRight"
  23.                 width="120" height="100"
  24.                 icon="{Icon}"
  25.                 labelPlacement="{bRight.label}"
  26.                 label="{ButtonLabelPlacement.RIGHT}" />
  27.  
  28.         <mx:Button id="bTop"
  29.                 width="120" height="100"
  30.                 icon="{Icon}"
  31.                 labelPlacement="{bTop.label}"
  32.                 label="{ButtonLabelPlacement.TOP}" />
  33.  
  34.         <mx:Button id="bBottom"
  35.                 width="120" height="100"
  36.                 icon="{Icon}"
  37.                 labelPlacement="{bBottom.label}"
  38.                 label="{ButtonLabelPlacement.BOTTOM}"/>
  39.     </mx:HBox>
  40.  
  41. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:minidxer

written by Minidxer  |  tags: , , , ,

Related Post

One Response to “Flex中利用labelPlacement属性在按钮控件(Button)中设置一个图标(icon)在按钮中的位置的例子”

Trackbacks

Leave a Reply