Flex skin 制作相关

最新推荐文章于 2017-10-10 17:19:00 发布

东东车

最新推荐文章于 2017-10-10 17:19:00 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

分类专栏： Flex积累文章标签： Flex ITeye XML Blog

本文链接：https://blog.youkuaiyun.com/macleo/article/details/83922682

Flex积累专栏收录该内容

87 篇文章

订阅专栏

[url]http://flex2.group.iteye.com/group/blog/840255[/url]

Flex4中BorderContainer有一个cornerRadius属性，通过设置该属性，即可实现圆角边框效果，但设置这个属性后，4个角都会变圆，有的时候可能会有这么一种需求：我只需要设置某一两个角变圆，或者几个圆角的弧度都不一样，这个时候，cornerRadius属性的设置显然就不能满足需求。

ps:在Flex4之前可以设置borderSides属性达到类似效果，如：borderSides="top left right"
在Flex4中borderSides属性貌似已经没有了（其实flex3中很多的属性，在flex4中都没有了，已经换了其他实现方式）

那么，在flex4中要如何做才能达到上面说的效果呢？

看代码：
首先，写一个skin：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx"
		alpha.disabled="0.5">

	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.SkinnableContainer")]
	</fx:Metadata>

	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="normal" />
	</s:states>

	<!-- SkinParts
	name=contentGroup, type=spark.components.Group, required=false
	-->

	<s:Rect left="0" top="0" right="0" width="100%" height="100%" 
			topLeftRadiusX="25">
		<s:stroke>
			<s:SolidColorStroke color="#AEADB0" alpha="0.5" scaleMode="none"/>
		</s:stroke>
		<s:fill>
			<mx:LinearGradient>
				<mx:entries>
					<mx:GradientEntry color="0x333333" ratio="0.00" alpha="0.5"/>
					<mx:GradientEntry color="0xfefef3" ratio="0.33" alpha="0.5"/>
					<mx:GradientEntry color="0x333333" ratio="0.66" alpha="0.5"/>
				</mx:entries>
			</mx:LinearGradient>
		</s:fill>
	</s:Rect>

	<s:Group id="contentGroup" left="1" right="1" top="1" bottom="1"/>
</s:Skin>

使用这个skin：

<s:SkinnableContainer width="20%" height="50" top="2" horizontalCenter="0"
				      skinClass="com.flyhigh.skin.BorderContainerSkin">

	</s:SkinnableContainer>