Flex 4中如何通过minViewportInset属性设置一个Spark Scroller视口的例子

By Minidxer | October 15, 2009

接下来的例子演示了Flex 4中如何通过minViewportInset属性，设置一个Spark Scroller视口（viewport）。

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：
下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_Scroller_minViewportInset_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.  
  7.     <mx:ApplicationControlBar width="100%" cornerRadius="0">
  8.         <mx:Form styleName="plain">
  9.             <mx:FormItem label="minViewportInset:">
  10.                 <s:HSlider id="slider1"
  11.                         maximum="50"
  12.                         liveDragging="true" />
  13.             </mx:FormItem>
  14.             <mx:FormItem label="width:">
  15.                 <s:HSlider id="slider2"
  16.                         minimum="100"
  17.                         maximum="550"
  18.                         value="300"
  19.                         liveDragging="true" />
  20.             </mx:FormItem>
  21.             <mx:FormItem label="height:">
  22.                 <s:HSlider id="slider3"
  23.                         minimum="100"
  24.                         maximum="550"
  25.                         value="200"
  26.                         liveDragging="true" />
  27.             </mx:FormItem>
  28.         </mx:Form>
  29.     </mx:ApplicationControlBar>
  30.  
  31.     <s:Panel horizontalCenter="0" verticalCenter="0">
  32.         <s:Scroller id="scroller"
  33.                 minViewportInset="{slider1.value}"
  34.                 width="300" height="200">
  35.             <s:Group>
  36.                 <s:Rect id="rect"
  37.                         width="{slider2.value}"
  38.                         height="{slider3.value}">
  39.                     <s:fill>
  40.                         <s:LinearGradient rotation="45">
  41.                             <s:GradientEntry color="red" />
  42.                             <s:GradientEntry color="yellow" />
  43.                             <s:GradientEntry color="haloBlue" />
  44.                         </s:LinearGradient>
  45.                     </s:fill>
  46.                 </s:Rect>
  47.             </s:Group>
  48.         </s:Scroller>
  49.     </s:Panel>
  50.  
  51. </s:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Gumbo, Scroller | No Comments » | Tags: , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll