Flex中通过按钮类的textAlign样式和labelPlacement属性控制按钮(Button)标签位置的例子

By Minidxer | August 10, 2008

在前面Flex中利用labelPlacementChanged事件检测按钮(Button)中标签(Label)位置是否改变的例子中其实已经用到了，接下来的例子演示了Flex中通过按钮类的textAlign样式和labelPlacement属性，控制按钮(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.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             [Bindable]
  10.             [Embed(source='assets/brick.png')]
  11.             private var BrickIcon:Class;
  12.         ]]>
  13.     </mx:Script>
  14.  
  15.     <mx:ApplicationControlBar dock="true">
  16.         <mx:Label text="textAlign:" />
  17.         <mx:ComboBox id="textAlignCB" selectedIndex="1">
  18.             <mx:dataProvider>
  19.                 <mx:String>left</mx:String>
  20.                 <mx:String>center</mx:String>
  21.                 <mx:String>right</mx:String>
  22.             </mx:dataProvider>
  23.         </mx:ComboBox>
  24.  
  25.         <mx:Spacer width="50" />
  26.  
  27.         <mx:Label text="labelPlacement:" />
  28.         <mx:ComboBox id="labelPlacementCB" selectedIndex="1">
  29.             <mx:dataProvider>
  30.                 <mx:String>left</mx:String>
  31.                 <mx:String>right</mx:String>
  32.                 <mx:String>top</mx:String>
  33.                 <mx:String>bottom</mx:String>
  34.             </mx:dataProvider>
  35.         </mx:ComboBox>
  36.     </mx:ApplicationControlBar>
  37.  
  38.     <mx:HBox>
  39.         <mx:Button label="Button"
  40.                 textAlign="{textAlignCB.selectedItem}"
  41.                 width="120"
  42.                 paddingTop="5"
  43.                 paddingBottom="5" />
  44.  
  45.         <mx:Button label="Button"
  46.                 icon="{BrickIcon}"
  47.                 textAlign="{textAlignCB.selectedItem}"
  48.                 labelPlacement="{labelPlacementCB.selectedItem}"
  49.                 width="120"
  50.                 paddingTop="5"
  51.                 paddingBottom="5"
  52.                 verticalGap="0" />
  53.     </mx:HBox>   
  54.  
  55. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads