Flex中如何利用getChildAt()和labelPlacement属性调整ButtonBar上按钮文本和图标相对位置的例子

By Minidxer | February 11, 2009

接下来的例子演示了Flex中如何利用getChildAt()和labelPlacement属性，调整ButtonBar上按钮文本和图标相对位置。

让我们先来看一下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.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.controls.Button;
  10.             import mx.controls.ButtonLabelPlacement;
  11.  
  12.             [Bindable]
  13.             [Embed("assets/arrow_down.png")]
  14.             private var arrowDown:Class;
  15.  
  16.             [Bindable]
  17.             [Embed("assets/arrow_left.png")]
  18.             private var arrowLeft:Class;
  19.  
  20.             [Bindable]
  21.             [Embed("assets/arrow_right.png")]
  22.             private var arrowRight:Class;
  23.  
  24.             [Bindable]
  25.             [Embed("assets/arrow_up.png")]
  26.             private var arrowUp:Class;
  27.  
  28.             private function init():void {
  29.                 var idx:uint;
  30.                 var len:uint = buttonBar.numChildren;
  31.                 var btn:Button;
  32.                 /* Loop over each button. */
  33.                 for (idx = 0; idx < len; idx++) {
  34.                     /* Get reference to current Button. */
  35.                     btn = buttonBar.getChildAt(idx) as Button;
  36.                     /* Set labelPlacement property to current item in
  37.                        arr Array object. */
  38.                     btn.labelPlacement = arr[idx].label;
  39.                 }
  40.             }
  41.         ]]>
  42.     </mx:Script>
  43.  
  44.     <mx:Array id="arr">
  45.         <mx:Object label="left" img="{arrowLeft}" />
  46.         <mx:Object label="right" img="{arrowRight}" />
  47.         <mx:Object label="top" img="{arrowUp}" />
  48.         <mx:Object label="bottom" img="{arrowDown}" />
  49.     </mx:Array>
  50.  
  51.     <mx:ButtonBar id="buttonBar"
  52.             dataProvider="{arr}"
  53.             iconField="img"
  54.             buttonHeight="64"
  55.             width="500"
  56.             creationComplete="init();" />
  57.  
  58. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: ButtonBar | No Comments » | 564 views Tags: , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll