使用HSlider组件动态改变容器大小

发布于,归属于flex实例沙发还空着,抢! 共有271人围观    

先来看演示:

当用户改变滑动条的值时,容器的宽度随着动态变化。

来看源代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3. <mx:Script>
  4.     <![CDATA[
  5.         [Bindable]
  6.         private var scale:Number = 1;
  7.         private function doResize(n:Number):Number{
  8.             zoom.zoomWidthTo = n;
  9.             zoom.play();
  10.             return box.scaleX;
  11.         }
  12.     ]]>
  13. </mx:Script>
  14.     <mx:Zoom id="zoom" originX="0" originY="0" target="{box}" />
  15.     <mx:Canvas id="box" x="10" y="52" scaleX="{doResize(scale)}" backgroundColor="#ffffff" width="200" height="200" >
  16.     </mx:Canvas>
  17.     <mx:HSlider id="slider" x="26" y="26" change="scale = slider.value" minimum="0" maximum="1" />
  18. </mx:Application>

关键知识点说明

  1. flex强大的数据绑定技术,想在组件中绑定as变量,请在此变量前加上[Bindable]元标签
  2. Zoom动画的使用,Zoom为放缩效果,注意与Resize效果类似,但实际上是有很大区别的。Zoom缩放的是比例,而Resize改变大小。
  3. 在使用函数绑定的时候,函数里面务必要有返回值
(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)