Flex4.5ProgressBar进度条组建的基本应用

最新推荐文章于 2019-02-15 16:14:38 发布

原创最新推荐文章于 2019-02-15 16:14:38 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #application #function #library #timer #import

Flex4.5 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在Flex框架中使用ProgressBar组件实现基础的加载效果。通过代码实例，详细解释了ProgressBar组件的关键属性和初始化方法，包括设置进度条的最大值、最小值、模式以及如何在加载过程中动态更新进度。

今天我们探讨一下ProgressBar进度条组件的基础应用，一想到进度条就想到了加载有木有！！

废话先不说代码先发下：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">
<fx:Declarations>

</fx:Declarations>
<fx:Script>
<![CDATA[
   import spark.components.mediaClasses.VolumeBar;
   import mx.controls.Alert;
   private var jishi:Timer;
   private var j:int=0;

   private function init():void / /读条开始的方法
   {
    jishi = new Timer(101,0); / / 给进度条定义大小，这里101是为了好看，因为加载完成的时候会显示100%
    jishi.addEventListener(TimerEvent.TIMER,timerHandler);/ / 加监听
    jishi.start();/ / 读条开始~
   }
   private function timerHandler(e:TimerEvent):void
   {
    runit();
   }
   private function runit():void / /判断是否加载完成
   {
    if(j<101)
    {
     bar.setProgress(j,101);
     bar.label="正在努力加载"+j+"%";
     j++;
    }
    if(j==101)
    {
     jishi.stop(); / /和上面的start对应，这里就是结束
     jishi.removeEventListener(TimerEvent.TIMER,timerHandler);
     Alert.show("加载已经完成","恭喜"); / / 上次讲过了，不懂的打PP

    }
   }
]]>
</fx:Script>
<mx:ProgressBar x="308" y="134" maximum="101" minimum="0" mode="manual" id="bar"/>
</s:Application>
首先呢，先定义一个ProgressBar组件了。如果是新手的话可以去设计界面去拖这个组件，很好找的。高端一点的当然就是直接敲代码了，当然我不会告诉你我是直接拖过来的~！

<mx:ProgressBar x="308" y="134" maximum="101" minimum="0" mode="manual" id="bar"/>
x y 就不说了，友情提示，x y 要杜绝哦这样组件的位置就写死了~我懒了一下，大家不要学我，反正现在只是组件的应用，布局咱们先不管，以后熟悉组件了，咱们再布局~先卖个关子。

maximum：ProgressBar 的最大进度值。

minimum：ProgressBar 的最小进度值。摆明了说就是读条的时候从最小读到最大，读到最大也就意味着加载完成了。

mode：指定用于更新进度栏的方法。当你给这个赋值的时候按alt+？会发现几个选项，为什么我选择了“manual”，下面看图。