Flex中使用CSS控制頁面樣式

Using file：

• Stylebounding.mxml
• Stylebounding2.mxml
• myCSS0329.css

 

在Flex4中使用CSS控制樣式，既能夠直接在MXML文件中寫樣式，也能夠新建一個CSS文件，在這個文件中寫樣式，後者更便於管理。

 

先來看看直接在mxml文件中寫樣式：

• 方法一：直接在想要控制的控件中直接寫CSS元素，如left,right,top等；
• 方法二：還能夠將CSS樣式寫在<fx:Style><fx:Style/>標籤中，示例代碼以下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
 3                xmlns:s="library://ns.adobe.com/flex/spark" 
 4                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 5     
 6     <fx:Declarations>
 7         <!-- 將非可視元素（例如服務、值對象）放在此處 -->
 8     </fx:Declarations>
 9     
10     <!--在MXML中使用樣式來實現行爲控制-->
11     <fx:Style>
12         @namespace s "library://ns.adobe.com/flex/spark";
13         @namespace mx "library://ns.adobe.com/flex/mx";
14         
15         #myTAEffect{
16             mouseDownEffect:WipeLeft;
17             duration:1000;
18         }
19     </fx:Style>
20     
21     <mx:TextArea id="myTAEffect"/>
22     
23 </s:Application>

重點談談利用CSS文件控制樣式。首先，新建一個CSS文件，填寫CSS樣式文件代碼。以後，須要將CSS文件引用到MXML文件中，具體以下：

　　<fx:Style source="CSS文件路徑"/>

在CSS文件中，要得到想要控制的對象，能夠經過在被控制對象裏設置id來進行，如控制TextArea須要設置id：

　　<mx:TextArea id="myTAEffect"/>

相應地，在CSS文件中經過「#」進行獲取，如：

　　#myTAEffect{

　　mouseDownEffect:WipeLeft;

　　duration:1000;

　　}

也能夠像在Html設置類來進行，即設置styleName屬性，如：

　　<mx:TextArea styleName="myTAEffect"/>

相應地，在CSS文件中經過「.」進行設置，如：

　　.myTAEffect{

　　mouseDownEffect:WipeLeft;

　　duration:1000;

　　}

而後在MXML文件中用到這同樣式時，只需在相應標籤中添上此styleName便可。

 

　　　　　　　　　　　　　　　上山若隨，2016年3月30日於南京草場門

 

參考資料：

1. 聶曉霞. Flex從入門到精通[M]. 北京:清華大學出版社,2008.

2. bangzhu. Java與Flex學習筆記----用CSS控制頁面樣式[OL].