【code】flex_进度条样式

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#进度条 #样式 #flex

flex 专栏收录该内容

10 篇文章

订阅专栏

本文分享了4个MXML组件源码，包括一个GridItemRenderer组件和一个ProgressBarSkin组件，旨在提供代码解析和理解的技术分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近打算吧硬盘中的资料记录在博客中，有用的就当是个分享，没用的就当是个备份，还望大家不要见怪。

一共4个文件：

JinDuTiaoItem.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
	
	<fx:Script>
		<![CDATA[
			import mx.skins.spark.ProgressBarSkin;
			[Bindable]
			[Embed(source="/assets/daihecha/46.png")]//绿色
			private var barColor:Class;
			
			[Embed(source="/assets/daihecha/45.png")]//红色
			private var redBarImage:Class;
			
			[Embed(source="/assets/daihecha/46.png")]//绿色
			private var greenBarImage:Class;
			
			override public function set data(v:Object):void{
				super.data = v;
				//pb.setProgress(5,10);
				pb.percentHeight= 50 ;
				/*
				* 根据不同的状态设置样式
				*/
				if(v){
					pb.setProgress(v.finish,v.total);
					if(data.status=='出错' ){
						barColor=redBarImage;
					}else{
						barColor=greenBarImage;
					}
					var num:Number = (v.finish*100/v.total);
					pb.label = num.toFixed(1)  + '%';
				}
				
			}
			
			
		]]>
	</fx:Script>
	<mx:ProgressBar id="pb" label="" width="100%" height="100%" mode="manual" labelPlacement="center"
					indeterminate="false" barSkin="{barColor}"
					trackSkin="com.uniware.dm.module.daihecha.ProgressBarSkinWhite"
					/>
</s:GridItemRenderer>

ProgressBarSkinWhite.mxml：

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The Spark skin class for the MX ProgressBar component. 

@see mx.controls.ProgressBar

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" >
	
	<fx:Script>
		/**
		 * @private
		 */
		override protected function initializationComplete():void
		{
			useChromeColor = true;
			super.initializationComplete();
		}
	</fx:Script>
	
	<!-- layer 1: fill -->
	<s:Rect left="2" right="2" top="2" bottom="2" >
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFFFFFF" 
								 alpha="1" />
				<s:GradientEntry color="#cedbef" 
								 alpha="1" />
				
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 2: border -->
	<s:Rect left="2" right="2" top="2" bottom="2" >
		<s:stroke>
			<s:LinearGradientStroke rotation="90">
				<s:GradientEntry color="0xFFFFFF" 
								 alpha=".9" />
				<s:GradientEntry color="0xFFFFFF" 
								 alpha="0.5" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 3: right edge -->
	<s:Rect right="1" top="2" bottom="2" width="1" >
		<s:fill>
			<s:SolidColor color="0x000000" alpha="0.55" />
		</s:fill>
	</s:Rect>
	
</s:SparkSkin>