Flex 組件的定位和布局
大多數 Flex 容器使用預定義的規則集來自動定位您在其內定義的所有子組件。如果您使用 Canvas 容器, 或者 Application 或 Panel 容器, 其 layout 屬性被設置為 "absolute", 則可以為其子級指定絕對位置, 或者使用基于限制的布局。
在 Flex 應用程序中定位組件的方法有三種:
- 使用自動定位
- 使用絕對定位
- 使用基于限制的布局
使用自動定位對于大多數容器, Flex 會根據容器的布局規則 (如布局方向、容器填充和容器的子級之間的間隙) 自動定位容器子級。
?
對于使用自動定位的容器, 直接設置其子組件的 x 或 y 屬性或調用 move() 方法沒有任何效果, 或僅有一個臨時效果, 因為布局計算將組件的位置設置為一個計算的結果, 而不是指定的值。
?
可以通過指定容器屬性控制布局的各個方面。下列屬性是最常見的:
layout: 可能的值有 "horizontal"、 "vertical"或 "absolute"。當設置為 "horizontal"時, 容器會將其子級布局在一行內。 當設置為 "vertical"時, 容器會將其子級布局在一列內。 有關 "absolute" 設置的信息, 請參閱絕對定位和基于限制的布局上的部分。
horizontalAlign: 可能的值有 "left"、 "center"或 "right"。
verticalAlign: 可能的值有 "top"、 "middle"或 "bottom"。
此示例覆蓋 Application 容器的 horizontalAlign 屬性的 "left" 的默認設置和Application 容器的 verticalAlign 屬性的 "top" 的默認設置以分別指定 "center" 和 "middle"。
?
此示例覆蓋 Panel 容器的 layout 屬性的 "vertical" 的默認設置, 從而以水平方式顯示 Label 和 Button 控件。 Panel 容器的 padding 屬性定義容器的空白區 (以像素計)。
?
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/LayoutAutomatic/index.html"
horizontalAlign="center" verticalAlign="middle"
width="380" height="150"
>
<mx:Panel
title="My Application"
paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10"
layout="horizontal" verticalAlign="middle"
>
<mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
<mx:Button
id="myButton" label="Click Me!"
click="myLabel.text = 'Hello, World!';"
/>
</mx:Panel>
</mx:Application>
?
使用絕對定位
?
有三個容器支持絕對定位:
?
如果您將 layout 屬性指定為 "absolute", 則 Application 和 Panel 控件使用絕對定位。
Canvas 容器始終使用絕對定位。
使用絕對定位, 你通過使用其 x 和 y 屬性來指定子控件的位置, 或者指定基于限制的布局；否則, Flex 會將該子級置于父容器的位置 0,0 處。 當您指定 x 和 y 坐標時, 僅當您更改這些屬性值時, Flex 才會重新定位控件。
?
此示例將 Panel 容器的 layout 屬性設置為 "absolute"。接著, 它會設置 Label 和 Button 控件的 x 和 y 屬性, 從而這兩個控件會重疊。
?
提示: 使用絕對定位是使 Flex 控件重疊的唯一方法。
?
示例
?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/LayoutAbsolute/index.html"
horizontalAlign="center" verticalAlign="middle"
width="280" height="170"
>
<mx:Panel
title="My Application" layout="absolute"
width="220" height="90"
>
<mx:Label
id="myLabel"
x="10" y="10" width="180"
fontWeight="bold" fontSize="24"
/>
<mx:Button
id="myButton"
x="60" y="10"
label="Click Me!"
click="myLabel.text = 'Hello, World!';"
/>
</mx:Panel>
</mx:Application>
?
使用基于限制的布局
?
您可以通過使用基于限制的布局同時管理子組件大小和定位子組件, 在該布局中您錨定組件的側邊或中心以相對于組件的容器進行定位。
?
您可以使用基于限制的布局來確定支持絕對定位的任何容器的即時子級的位置和大小。
?
您通過使用子組件的 top、 bottom、 left、 right、 horizontalCenter或 verticalCenter 樣式屬性來指定限制。
錨定組件的邊緣
您可以將組件的一個或多個邊緣錨定在其容器的相應邊緣的某個像素偏移處。 當容器調整大小時, 錨定的子級邊緣保持與父級邊緣的距離相同。
?
top、 bottom、 left和 right 樣式屬性指定組件側邊與相應的容器側邊之間的距離 (以像素計)。
下面的示例中的 Button 控件具有錨定的底邊和右邊, 與它所在的 Panel 容器的邊相距 10 個像素。
?
示例
?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/LayoutConstraintsBottomRight/index.html"
horizontalAlign="center" verticalAlign="middle"
width="360" height="200"
>
<mx:Panel
title="My Application" layout="absolute"
width="300" height="130"
>
<mx:Button
id="myButton"
label="A button"
bottom="10"
right="10"
/>
</mx:Panel>
</mx:Application>
?
拉伸組件 如果在一個方向中錨定兩個邊, 如頂邊和底邊, 則在調整容器大小時, 也會調整組件大小。 下面的示例中的 Button 控件四個邊都已被錨定, 與它所在的 Panel 容器的邊相距 10 個像素。
?
示例
?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/LayoutConstraintsEdges/index.html"
horizontalAlign="center" verticalAlign="middle"
width="360" height="200"
>
<mx:Panel
title="My Application" layout="absolute"
width="300" height="130"
>
<mx:Button
id="myButton"
label="A button"
top="10"
bottom="10"
left="10"
right="10"
/>
</mx:Panel>
</mx:Application>
?
錨定組件的中心
您還可以將某個子組件的水平或垂直中心 (或全部兩者) 錨定在容器中心的某個像素偏移處。 除非您同時使用基于百分比的大小調整, 否則該子級不會在指定的尺寸內調整大小。
?
horizontalCenter 和 verticalCenter 樣式指定在指定的方向上組件的中心點與容器的中心之間的距離；一個負數會從中心向左或向上移動組件。
?
horizontalCenter 和 verticalCenter 樣式指定從容器中心的偏移 (以像素計), 應將控件置于此處。 下面的示例中的 Button 控件將兩個樣式都設置為 0 (零) 以完美地將它在 Panel 容器中居中。
?
示例
?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/LayoutConstraintsCenter/index.html"
horizontalAlign="center" verticalAlign="middle"
width="360" height="200"
>
<mx:Panel
title="My Application" layout="absolute"
width="300" height="130"
>
<mx:Button
id="myButton"
label="A button"
verticalCenter="0"
horizontalCenter="0"
/>
</mx:Panel>
</mx:Application>
?
一個更加復雜的示例
?
下面的這個示例使用基于限制的布局來居中 Label 控件并使 Button 控件拉伸至幾乎 Panel 的完全長度。 將 Label 控件的 top 屬性設置為 10 以限制它看起來與 Panel 的頂部的距離為 10 像素。 將其 horizontalCenter 屬性設置為 10 以完美地將它在 Panel 中居中。
?
將 Button 控件的 left 和 right 屬性設置為 10 以使它拉伸至距離 Panel 的每一邊都在 10 像素內。 將其底邊屬性設置為 10 以限制其底邊距離 Panel 的下邊為 10 個像素。
?
下面的圖說明您以可視方式設置的屬性的效果。 可視布局控件是 Flex Builder 2 的設計視圖的組成部分。
?
?
提示: 不要使用 verticalCenter 樣式屬性指定 top 或 bottom 樣式屬性, verticalCenter 值會覆蓋其他屬性。 類似地, 不要使用 horizontalCenter 樣式屬性指定 left 或 right 樣式屬性。
由基于限制的布局確定的大小會覆蓋任何顯式或基于百分比的大小規范。 例如, 如果您指定 left 和 right 樣式屬性, 產生的基于限制的寬度會覆蓋由 width 或 percentWidth 屬性設置的任何寬度。
?
示例
?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/LayoutConstraints/index.html"
horizontalAlign="center" verticalAlign="middle"
width="360" height="200"
>
<mx:Panel
title="My Application" layout="absolute"
width="300" height="130"
>
<mx:Label
id="myLabel"
fontWeight="bold"
fontSize="24"
top="10"
horizontalCenter="0"
/>
<mx:Button
id="myButton"
label="Click Me!"
click="myLabel.text = 'Hello, World!';"
bottom="10"
height="22"
left="10"
right="10"
/>
</mx:Panel>
</mx:Application>
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
