FLEX 定义组件样式的方法总结
转载
FLEX的组件的确很不错,而且可以修改他的样式,让它看起来更舒服。在这个样式这问题上,感觉最麻烦的就是字体问题,同样是8PT的字体,ENGLISH很清楚,中文就惨不忍睹了。
在FLEX里面,可以用几种方法修改:
1.在控制面板的直接设置
FLEX里style面板里都可以设置相关组件字体的样式,例如button、lable、checkbox等字体,直接在上面设置就行了。它自动生成的代码如
下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button x="153" y="187" label="Button" fontSize="35"/>
</mx:Application>
|
2.setStyle()方法
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
public function initButton():void
{
myButton.setStyle("fontSize",35);
}
]]>
</mx:Script>
<mx:Button x="153" y="187" label="Button" id="myButton" initialize="initButton()"/>
</mx:Application>
|
3.使用CSS,在使用CSS这个方法种,可以提供两种选择,直接在MXML里面写,或者提供外部source的CSS。当然拉,直接写在MXML方便,外部CSS,方便统一样式。
直接内部定义所有Button的样式:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
Button{fontSize:35}
</mx:Style>
<mx:Button x="153" y="187" label="Button" id="myButton" />
</mx:Application>
|
直接内部定义某一个Button样式:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
.myStyle{fontSize:35}
</mx:Style>
<mx:Button x="153" y="187" label="Button" id="myButton" styleName="myStyle"/>
</mx:Application>
|
外部定义CSS: ButtonStyle.css:
/* CSS file */
.myStyle
{
fontSize:35;
}
|
连接使用CSS:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="ButtonStyle.css" />
<mx:Button x="153" y="187" label="Button" id="myButton" styleName="myStyle"/>
</mx:Application>
|
也许在Button的样式应用问题不大,但是对于Alert这类型的组件来说,要改变默认的样式,方法1很明显是行不通的,只有通过方法2和3了。