Flex3 元件的定位和布局

flex 元件的定位和布局

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

使用自動定位對於大多數容器, flex 會根據容器的布局規則 (如布局方向、容器填充和容器的子級之間的間隙) 自動定位容器子級。

對於使用自動定位的容器, 直接設定其子元件的 x 或 y 屬性或呼叫 move() 方法沒有任何效果, 或僅有乙個臨時效果, 因為布局計算將元件的位置設定為乙個計算的結果, 而不是指定的值。

可以通過指定容器屬性控制布局的各個方面。下列屬性是最常見的:

layout: 可能的值有 "horizontal"、 "vertical"或 "absolute"。當設定為 "horizontal"時, 容器會將其子級布局在一行內。當設定為 "vertical"時, 容器會將其子級布局在一列內。有關 "absolute" 設定的資訊, 請參閱絕對定位和基於限制的布局上的部分。

horizontalalign: 可能的值有 "left"、 "center"或 "right"。

verticalalign: 可能的值有 "top"、 "middle"或 "bottom"。

此示例覆蓋 panel 容器的 layout 屬性的 "vertical" 的預設設定, 從而以水平方式顯示 label 和 button 控制項。 panel 容器的 padding 屬性定義容器的空白區 (以畫素計)。

示例

<?xml version="1.0" encoding="utf-8"?>
xmlns:mx=""
viewsourceurl="src/layoutautomatic/index.html"
horizontalalign="center" verticalalign="middle"
width="380" height="150"
>

使用絕對定位有三個容器支援絕對定位:

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

此示例將 panel 容器的 layout 屬性設定為 "absolute"。接著, 它會設定 label 和 button 控制項的 x 和 y 屬性, 從而這兩個控制項會重疊。

示例

<?xml version="1.0" encoding="utf-8"?>
xmlns:mx=""
viewsourceurl="src/layoutabsolute/index.html"
horizontalalign="center" verticalalign="middle"
width="280" height="170"
>

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

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

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

錨定元件的邊緣

您可以將元件的乙個或多個邊緣錨定在其容器的相應邊緣的某個畫素偏移處。當容器調整大小時, 錨定的子級邊緣保持與父級邊緣的距離相同。

top、 bottom、 left和 right 樣式屬性指定元件側邊與相應的容器側邊之間的距離 (以畫素計)。

下面的示例中的 button 控制項具有錨定的底邊和右邊, 與它所在的 panel 容器的邊相距 10 個畫素。

示例

<?xml version="1.0" encoding="utf-8"?>
xmlns:mx=""
viewsourceurl="src/layoutconstraintsbottomright/index.html"
horizontalalign="center" verticalalign="middle"
width="360" height="200"
>

拉伸元件如果在乙個方向中錨定兩個邊, 如頂邊和底邊, 則在調整容器大小時, 也會調整元件大小。下面的示例中的 button 控制項四個邊都已被錨定, 與它所在的 panel 容器的邊相距 10 個畫素。

示例

<?xml version="1.0" encoding="utf-8"?>
xmlns:mx=""
viewsourceurl="src/layoutconstraintsedges/index.html"
horizontalalign="center" verticalalign="middle"
width="360" height="200"
>

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

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

horizontalcenter 和 verticalcenter 樣式指定從容器中心的偏移 (以畫素計), 應將控制項置於此處。下面的示例中的 button 控制項將兩個樣式都設定為 0 (零) 以完美地將它在 panel 容器中居中。

示例

<?xml version="1.0" encoding="utf-8"?>
xmlns:mx=""
viewsourceurl="src/layoutconstraintscenter/index.html"
horizontalalign="center" verticalalign="middle"
width="360" height="200"
>

乙個更加複雜的示例下面的這個示例使用基於限制的布局來居中 label 控制項並使 button 控制項拉伸至幾乎 panel 的完全長度。將 label 控制項的 top 屬性設定為 10 以限制它看起來與 panel 的頂部的距離為 10 畫素。將其 horizontalcenter 屬性設定為 10 以完美地將它在 panel 中居中。

將 button 控制項的 left 和 right 屬性設定為 10 以使它拉伸至距離 panel 的每一邊都在 10 畫素內。將其底邊屬性設定為 10 以限制其底邊距離 panel 的下邊為 10 個畫素。

下面的圖說明您以可視方式設定的屬性的效果。可視布局控制項是 flex builder 2 的設計檢視的組成部分。

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

示例

<?xml version="1.0" encoding="utf-8"?>
xmlns:mx=""
viewsourceurl="src/layoutconstraints/index.html"
horizontalalign="center" verticalalign="middle"
width="360" height="200"
>

Flex3 元件的定位和布局

flex3 和 flex4 新元件和容器

Flex的定位和布局

flex3和flex4的區別

Flex3 元件的定位和布局

flex3 和 flex4 新元件和容器

Flex的定位和布局

flex3和flex4的區別

相關推薦