Flex中如何通过buttonHeight样式设置ButtonBar控件中按钮高度的例子

By Minidxer | October 1, 2008

接下来的例子演示了Flex中如何通过buttonHeight样式,设置ButtonBar控件中按钮高度。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="ButtonBar_buttonHeight_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Style>
  9.         .buttonBarButtonStyles {
  10.             textAlign: left;
  11.         }
  12.     </mx:Style>
  13.  
  14.     <mx:Array id="arr">
  15.         <mx:Object label="Red"
  16.                 icon="@Embed('assets/bullet_red.png')" />
  17.         <mx:Object label="Orange"
  18.                 icon="@Embed('assets/bullet_orange.png')" />
  19.         <mx:Object label="Yellow"
  20.                 icon="@Embed('assets/bullet_yellow.png')" />
  21.         <mx:Object label="Green"
  22.                 icon="@Embed('assets/bullet_green.png')" />
  23.         <mx:Object label="Blue"
  24.                 icon="@Embed('assets/bullet_blue.png')" />
  25.     </mx:Array>
  26.  
  27.     <mx:ApplicationControlBar dock="true">
  28.         <mx:Form styleName="plain">
  29.             <mx:FormItem label="buttonHeight:">
  30.                 <mx:HSlider id="slider"
  31.                         minimum="16"
  32.                         maximum="48"
  33.                         value="24"
  34.                         snapInterval="1"
  35.                         tickInterval="2"
  36.                         liveDragging="true" />
  37.             </mx:FormItem>
  38.             <mx:FormItem label="direction:">
  39.                 <mx:ComboBox id="comboBox"
  40.                         dataProvider="[horizontal,vertical]" />
  41.             </mx:FormItem>
  42.         </mx:Form>
  43.     </mx:ApplicationControlBar>
  44.  
  45.     <mx:ButtonBar id="buttonBar"
  46.             dataProvider="{arr}"
  47.             buttonHeight="{slider.value}"
  48.             direction="{comboBox.selectedItem}"
  49.             buttonStyleName="buttonBarButtonStyles" />
  50.  
  51. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

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

Search Posts