Flex 4 樣式與布局小結

2021-09-29 06:41:37 字數 2374 閱讀 2554

flex 4/spark元件架構的新功能之一是可以定製乙個容器的布局而不必改變容器本身。您需要做的就是定義乙個自定義布局。

flex 4/spark架構中的容器並不控制它們自己的布局。相反,每種容器具有乙個布局屬性,用於確定如何在螢幕上設定子元素的布局。可以使用乙個單獨的group容器,並賦予其乙個垂直布局、水平布局或平鋪布局,這取決於您將如何建立它。

**很簡單,如下所示:

不過真正的好處在於您不必侷限於框架中定義的預設布局。您可以輕鬆定製baselayout類來實現自己定製的布局邏輯。

(參考文章:flex 4與自定義布局:

譯文:原文: )

在flex 4中,skinclass指向的檔案通常用乙個使用s:skin標籤(或者sparkskin)的mxml檔案進行定義。通過skinclass來改變外觀的spark元件通常也是skinclass引用的host component。

flex 4 中新的改變外觀架構可以在很大的程度上將元件和元件的外觀設計分開,這樣元件外觀設計的**通過改變小部分的**就可以得到重用了。

一、skinclass必須包含的三樣東西:

1、 hostcomponent metadata

skinclass檔案需要引用hostcomponent物件,而hostcomponent是指需要改變外觀的元件。我們可以通過metadata標籤來指定hostcomponent。如:

我們需要設定button的外觀,那麼button就是hostcomponent。

code:

1. 2. 3. [hostcomponent("")]

4. ]]>

5. 2、 states

如果hostcomponent中有skinstate(一般用metadata標籤來宣告),例如:

s: buttonbase中包含了

6. [skinstate("up")]

那麼在相應的skinclass mxml檔案中必須有如下相應的state:

1. 7.

3、 skin parts

hostcomponent中的屬性可以被定義為必須或者是可選的部分(skin parts),可選的屬性一般通過metadata標籤將其預設設定為false。如果s:buttonbase中包含一下的屬性:

那麼,skin檔案應該包含一下相應的宣告:

二、skinclass的使用方法:

(skins.customapplicationskin 為skinclass指向的mxml檔案路徑)

1、屬性引用:

2、css引入:

3、as**指定,比較適合動態**。

三、示例

見word文件 《flex 4 skinclass 簡單示例》

flex 4 對css做了很大的改進,雖然還不能像html那樣隨心所欲,但是也能滿足任何專案的要求了。

flex 不支援使用層疊樣式表 (css) 來控制項的所有可視方面。屬性, 比如 x, y, width 和 height 是 uicomponent 類的屬性, 而不是其樣式, 因此, 無法在 css 中進行設定。您還必須知道您的主題支援哪些屬性。

flex 中的預設主題並不支援所有樣式屬性。

在 flex 中應用樣式有許多方法。 某些樣式提供更多粒度控制並能以程式設計方式被執行。其他樣式不像那麼靈活, 但可能需要較少的計算

一、設定樣式的幾種方式

使用本地樣式定義

使用外部樣式表

使用內聯樣式

可以像設定元件的屬性一樣在mxml標籤中設定樣式屬性。內聯樣式的優先順序高於本地樣式和外部樣式。

例如:<:button id="mybutton" fontsize="15" label="my button"/>

使用 setstyle() 方法

可以在actionscript中使用方法來操作元件的樣式屬性。使用setstyle()方法的優先順序是最高的。

setstyle() 方法採用兩個引數: 樣式名稱和樣式值。

二、flex css樣式設定

詳細見文件:《flex 4 css樣式設定例》

1、四種基本的選擇方式:

1)type

例如:s|button

適合任意乙個button的例項。

2)universal

例如:* (注意要加上*號)

對程式中所有元件的字型都有效。

3)class:由元件的stylename屬性引用

例如:.rounded (header為元件的id)

note:四種方式可以也可以通過組合形成新的選擇方式

5)組合方式

例如:.main s|button

即對引用class 為main的元件內所有button的樣式都有影響。

2、示例(各種使用方法彙總)

1)csstest.mxml 檔案

2019樣式管理

word2003提供了乙個管理器,可以用來管理樣式。利用它可以將樣式從乙個文件或模板複製到另乙個中,不需要再次建立或修改同乙個樣式。還可以重新命名樣式,或者將文件 模板中無用的樣式刪除。使用方法如下 1 單擊 格式 選單中的 樣式和格式 選單項,開啟 樣式和格式 任務窗格。2 單擊 顯示 對話方塊右...

2019樣式管理技巧

word2003提供了乙個管理器,可以用來管理樣式。利用它可以將樣式從乙個文件或模板複製到另乙個中,不需要再次建立或修改同乙個樣式。還可以重新命名樣式,或者將文件 模板中無用的樣式刪除。使用方法如下 1 單擊 格式 選單中的 樣式和格式 選單項,開啟 樣式和格式 任務窗格。2 單擊 顯示 對話方塊右...

2019上半年總結0615 樣式

質量管理 工藝技術創新 等各項工作。12年上半年生產報驗難度加大,制約生產計畫的有序完成,碼頭船舶建造周期長,勞務隊伍穩定性差,關鍵工種勞動力不足,勞動效率低 生產場地嚴重不足,機裝課與有關部門一起全力以赴,通過加強過程管理,提高協調效率,提倡前瞻性管理,通過不同應急措施的落實,響應公司提出的 時間...