Flex中如何利用backgroundAlpha样式调整HorizontalList控件背景填充颜色透明度的例子

By Minidxer | January 29, 2009

接下来的例子演示了Flex中如何利用backgroundAlpha样式,调整HorizontalList控件背景填充颜色透明度。

让我们先来看一下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.         Application {
  10.             backgroundGradientColors: red, black;
  11.         }
  12.     </mx:Style>
  13.  
  14.     <mx:Script>
  15.         <![CDATA[
  16.             import mx.events.SliderEvent;
  17.  
  18.             private function init():void {
  19.                 slider.value = horizontalList.getStyle("backgroundAlpha");
  20.             }
  21.  
  22.             private function slider_change(evt:SliderEvent):void {
  23.                 horizontalList.setStyle("backgroundAlpha", evt.value);
  24.             }
  25.         ]]>
  26.     </mx:Script>
  27.  
  28.     <mx:Array id="arr">
  29.         <mx:Object label="Accordion" />
  30.         <mx:Object label="ApplicationControlBar" />
  31.         <mx:Object label="Box" />
  32.         <mx:Object label="Canvas" />
  33.         <mx:Object label="ControlBar" />
  34.         <mx:Object label="DividedBox" />
  35.         <mx:Object label="Form" />
  36.         <mx:Object label="FormHeading" />
  37.         <mx:Object label="FormItem" />
  38.         <mx:Object label="Grid" />
  39.         <mx:Object label="HBox" />
  40.         <mx:Object label="HDividedBox" />
  41.         <mx:Object label="Panel" />
  42.         <mx:Object label="TabNavigator" />
  43.         <mx:Object label="Tile" />
  44.         <mx:Object label="TitleWindow" />
  45.         <mx:Object label="VBox" />
  46.         <mx:Object label="VDividedBox" />
  47.         <mx:Object label="ViewStack" />
  48.     </mx:Array>
  49.  
  50.     <mx:ApplicationControlBar dock="true">
  51.         <mx:Form styleName="plain">
  52.             <mx:FormItem label="backgroundAlpha:">
  53.                 <mx:HSlider id="slider"
  54.                         minimum="0.0"
  55.                         maximum="1.0"
  56.                         liveDragging="true"
  57.                         tickInterval="0.1"
  58.                         change="slider_change(event);" />
  59.             </mx:FormItem>
  60.         </mx:Form>
  61.     </mx:ApplicationControlBar>
  62.  
  63.     <mx:HorizontalList id="horizontalList"
  64.             dataProvider="{arr}"
  65.             backgroundAlpha="1.0"
  66.             backgroundColor="haloSilver"
  67.             columnWidth="175"
  68.             columnCount="3"
  69.             rowCount="1"
  70.             rowHeight="100" />
  71.  
  72. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: HorizontalList | No Comments » | 647 views Tags: , ,

Search Posts