Flex4基礎 元件定位和容器布局

2021-06-18 18:57:53 字數 3029 閱讀 3754

demo:

以下資料部分來自adobe中文網,但資料年代已久,根據我自己的實驗對部分內容進行了更新。

首先了解乙個基礎定義:容器和元件,元件是button、textinput等用於顯示的基礎控制項,容器是用來存放元件的,多個元件可以放在同一容器中。

flex的依靠容器來執行布局,大多數 flex 容器使用預定義的規則集來自動定位您在其內定義的所有子元件。flex 4 容器可以提供一套預設的布局:basic、horizontal或 vertical以及能夠基於容器內容的預設尺寸。有些容器是可植皮的,可以通過在它們的**上新增spark scroller對它們進行滾動操作。

在 flex 應用程式中定位元件的方法有三種:

•    使用自動定位

•    使用絕對定位

•    使用基於限制的布局

對於大多數容器, flex 會根據容器的布局規則 (如布局方向、容器填充和容器內的元件之間的間隙) 自動定位容器子級。對於使用自動定位的容器, 直接設定其子元件的 x 或 y 屬性或呼叫 move() 方法沒有任何效果, 或僅有乙個臨時效果, 因為布局計算將元件的位置設定為乙個計算的結果, 而不是指定的值。

在flex4中自動定義使用或來定位:使用horizontallayout,容器內的元件會排放在豎直方向(同一列排放),使用,容器內的元件會排放在水平方向(同一行排放)。

可以通過指定容器屬性控制容器內元件的布局格式,下列屬性是最常見的:

• horizontalalign: 布局元素的水平對齊方式,可能的值有 "left"、 "center"或 "right"。

• verticalalign: 布局元素的豎直對齊方式,可能的值有 "top"、 "middle"或 "bottom"。

xmlns:s="library:"

xmlns:mx="library:" minwidth="955" minheight="600">

最後看執行結果:

使用絕對定位, 你通過使用其 x 和 y 屬性來指定子控制項的位置, 或者指定基於限制的布局;否則, flex 會將該子級置於父容器的位置 0,0 處。 當您指定 x 和 y 座標時, 僅當您更改這些屬性值時, flex 才會重新定位控制項。使用標籤表示絕對定位。

下面這個例子使用了據對定位標籤,容器內名為「按鈕1」的元件未定義座標則預設放在(0,0)位置,其它元件定義了xy則排放在指定位置。

xmlns:s="library:"

xmlns:mx="library:" minwidth="955" minheight="600">

執行效果如下圖所示:

您可以通過使用基於限制的布局同時管理子元件大小和定位子元件, 在該布局中您錨定元件的側邊或中心以相對於元件的容器進行定位。

您可以使用基於限制的布局來確定支援絕對定位的任何容器的即時子級的位置和大小。

您通過使用子元件的 top、 bottom、 left、 right、 horizontalcenter 或 verticalcenter 樣式屬性來指定限制。

→錨定元件的邊緣

您可以將元件的乙個或多個邊緣錨定在其容器的相應邊緣的某個畫素偏移處。 當容器調整

大小時, 錨定的子級邊緣保持與父級邊緣的距離相同。

top、 bottom、 left 和 right 樣式屬性指定元件側邊與相應的容器側邊之間的距離 (以畫素計)。比如top,表示元件的上邊界離容器上邊界的畫素距離。注意:所有錨定屬性的值必須為整數,不能是」100px」之類的。

如下例所示,在乙個panel容器中放入乙個button,指定上下左右的錨點都是50畫素:

如果在乙個方向中錨定兩個邊, 如頂邊和底邊, 則在調整容器大小時, 也會調整元件大小(元件可能被拉伸或壓縮)。上例執行結果如下圖所示:

→錨定元件的中心

您還可以將某個子元件的水平或垂直中心 (或全部兩者) 錨定在容器中心的某個畫素偏移處。除非您同時使用基於百分比的大小調整, 否則該子級不會在指定的尺寸內調整大小。

horizontalcenter 和 verticalcenter 樣式指定在指定的方向上元件的中心點與容器的中心之間的距離(以畫素計);乙個負數會從中心向左或向上移動元件。

下面的示例定義了乙個panel容器,容器中放有三個button,中心錨點位置都不同:

執行效果如下圖所示:

以上三種布局方式可以混合使用,以達到最終目的。

不過有些規則需要注意:不要使用verticalcenter樣式屬性指定top或bottom樣式屬性, verticalcenter值會覆蓋其他屬性。類似地,不要使用horizontalcenter樣式屬性指定left或right樣式屬性。

由基於限制的布局確定的大小會覆蓋任何顯式或基於百分比的大小規範。例如,如果您指定 left 和 right 樣式屬性,產生的基於限制的寬度會覆蓋由 width 或 percentwidth 屬性設定的任何寬度。

最後,給出需要牢記的若干通用技巧:

容器用來裝載元件等內容,如果容器內元件過多可能會造成內容過長過寬等情況,所以我們會考慮使用滾動條來固定容器長寬。

在flex 3中,滾動功能內置於元件;而在 flex 4中,該功能的實現方式不同。對group 容器以及 hgroup、vgroup和 datagroup 容器進行滾動操作的最佳方法是在乙個spark scroller物件中包裝容器。 關鍵之處是將scroller的寬度和高度設定為你希望檢視內容的尺寸。你也可以設定滾動位置以便在相應範圍的當前位置顯示內容。

scroller屬性:

horizontalscrollpolicy:水平方向是否顯示滾動條(auto:自動如果超出範圍才顯示,on:一直顯示,off:一直不顯示)

verticalscrollpolicy:豎直方向是否顯示滾動條(auto:自動如果超出範圍才顯示,on:一直顯示,off:一直不顯示)

下面例子,在panel中新增乙個group並且設定滾動條:

xmlns:s="library:"

xmlns:mx="library:" minwidth="300" minheight="300" >

執行結果如下圖所示:

需要注意的是:內只支援繼承自group的容器。

Flex4基礎 元件定位和容器布局

以下資料部分來自adobe中文網,但資料年代已久,根據我自己的實驗對部分內容進行了更新。首先了解乙個基礎定義 容器和元件,元件是button textinput等用於顯示的基礎控制項,容器是用來存放元件的,多個元件可以放在同一容器中。flex的依靠容器來執行布局,大多數 flex 容器使用預定義的規...

flex3 和 flex4 新元件和容器

新的元件和容器 元件flex4修改和新增了一些元件,也有些元件是halo有的,但是spark沒有。adobe建議你halo和spark一起用。state語法的改變 state語法變了,變得更加的有彈性和直接。你甚至可以根據上下文來針對性的改變你的狀態。下面是重點 1,只有狀態被定義到了狀態陣列。2,...

Flex4中s List元件的使用

1.先來乙個最簡單的例子,關於s list的使用 xmlns s library xmlns mx library minwidth 955 minheight 600 該例子使用arraycollection做為list的資料來源,通過屬性labelfield city 將city的內容繫結到li...