Flex textInput图角特效原理其实比较简单,但是实现起来略微比较麻烦,为了减少查找internet的时候,我这里整理了项目中用到的方法。分享给大家,如下所示:
1. 首先编写皮肤类
<?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">
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>
<!---@private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0"
radiusX="{getStyle('cornerRadius')}" radiusY="{getStyle('cornerRadius')}">
<s:stroke>
<!---@private -->
<s:SolidColorStroke id="borderStroke" color="{getStyle('borderColor')}"/>
</s:stroke>
<s:fill>
<!---@private -->
<s:SolidColor id="bgFill" color="{getStyle('contentBackgroundColor')}"/>
</s:fill>
</s:Rect>
</s:Skin>
2.在fx:style标签下申明:
.loginTextInput_4 {
corner-radius:5;
borderStyle: solid;
borderSkin: ClassReference("cn.ac.iscas.gz.sems.skin.TextInputSkin");
}
3.在布局文件中使用
<mx:TextInput width="244" height="32" textAlign="left"
styleName="loginTextInput_4"
id="userName" text="admin" color="white" focusInEffect="{glow}" />
(完。。。。)