Flex 組件的定位和布局
大多數(shù) Flex 容器使用預(yù)定義的規(guī)則集來自動(dòng)定位您在其內(nèi)定義的所有子組件。如果您使用 Canvas 容器, 或者 Application 或 Panel 容器, 其 layout 屬性被設(shè)置為 "absolute", 則可以為其子級指定絕對位置, 或者使用基于限制的布局。
在 Flex 應(yīng)用程序中定位組件的方法有三種:
- 使用自動(dòng)定位
- 使用絕對定位
- 使用基于限制的布局
使用自動(dòng)定位對于大多數(shù)容器, Flex 會(huì)根據(jù)容器的布局規(guī)則 (如布局方向、容器填充和容器的子級之間的間隙) 自動(dòng)定位容器子級。
?
對于使用自動(dòng)定位的容器, 直接設(shè)置其子組件的 x 或 y 屬性或調(diào)用 move() 方法沒有任何效果, 或僅有一個(gè)臨時(shí)效果, 因?yàn)椴季钟?jì)算將組件的位置設(shè)置為一個(gè)計(jì)算的結(jié)果, 而不是指定的值。
?
可以通過指定容器屬性控制布局的各個(gè)方面。下列屬性是最常見的:
layout: 可能的值有 "horizontal"、 "vertical"或 "absolute"。當(dāng)設(shè)置為 "horizontal"時(shí), 容器會(huì)將其子級布局在一行內(nèi)。 當(dāng)設(shè)置為 "vertical"時(shí), 容器會(huì)將其子級布局在一列內(nèi)。 有關(guān) "absolute" 設(shè)置的信息, 請參閱絕對定位和基于限制的布局上的部分。
horizontalAlign: 可能的值有 "left"、 "center"或 "right"。
verticalAlign: 可能的值有 "top"、 "middle"或 "bottom"。
此示例覆蓋 Application 容器的 horizontalAlign 屬性的 "left" 的默認(rèn)設(shè)置和Application 容器的 verticalAlign 屬性的 "top" 的默認(rèn)設(shè)置以分別指定 "center" 和 "middle"。
?
此示例覆蓋 Panel 容器的 layout 屬性的 "vertical" 的默認(rèn)設(shè)置, 從而以水平方式顯示 Label 和 Button 控件。 Panel 容器的 padding 屬性定義容器的空白區(qū) (以像素計(jì))。
?
示例
<?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>
?
使用絕對定位
?
有三個(gè)容器支持絕對定位:
?
如果您將 layout 屬性指定為 "absolute", 則 Application 和 Panel 控件使用絕對定位。
Canvas 容器始終使用絕對定位。
使用絕對定位, 你通過使用其 x 和 y 屬性來指定子控件的位置, 或者指定基于限制的布局；否則, Flex 會(huì)將該子級置于父容器的位置 0,0 處。 當(dāng)您指定 x 和 y 坐標(biāo)時(shí), 僅當(dāng)您更改這些屬性值時(shí), Flex 才會(huì)重新定位控件。
?
此示例將 Panel 容器的 layout 屬性設(shè)置為 "absolute"。接著, 它會(huì)設(shè)置 Label 和 Button 控件的 x 和 y 屬性, 從而這兩個(gè)控件會(huì)重疊。
?
提示: 使用絕對定位是使 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>
?
使用基于限制的布局
?
您可以通過使用基于限制的布局同時(shí)管理子組件大小和定位子組件, 在該布局中您錨定組件的側(cè)邊或中心以相對于組件的容器進(jìn)行定位。
?
您可以使用基于限制的布局來確定支持絕對定位的任何容器的即時(shí)子級的位置和大小。
?
您通過使用子組件的 top、 bottom、 left、 right、 horizontalCenter或 verticalCenter 樣式屬性來指定限制。
錨定組件的邊緣
您可以將組件的一個(gè)或多個(gè)邊緣錨定在其容器的相應(yīng)邊緣的某個(gè)像素偏移處。 當(dāng)容器調(diào)整大小時(shí), 錨定的子級邊緣保持與父級邊緣的距離相同。
?
top、 bottom、 left和 right 樣式屬性指定組件側(cè)邊與相應(yīng)的容器側(cè)邊之間的距離 (以像素計(jì))。
下面的示例中的 Button 控件具有錨定的底邊和右邊, 與它所在的 Panel 容器的邊相距 10 個(gè)像素。
?
示例
?
<?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>
?
拉伸組件 如果在一個(gè)方向中錨定兩個(gè)邊, 如頂邊和底邊, 則在調(diào)整容器大小時(shí), 也會(huì)調(diào)整組件大小。 下面的示例中的 Button 控件四個(gè)邊都已被錨定, 與它所在的 Panel 容器的邊相距 10 個(gè)像素。
?
示例
?
<?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>
?
錨定組件的中心
您還可以將某個(gè)子組件的水平或垂直中心 (或全部兩者) 錨定在容器中心的某個(gè)像素偏移處。 除非您同時(shí)使用基于百分比的大小調(diào)整, 否則該子級不會(huì)在指定的尺寸內(nèi)調(diào)整大小。
?
horizontalCenter 和 verticalCenter 樣式指定在指定的方向上組件的中心點(diǎn)與容器的中心之間的距離；一個(gè)負(fù)數(shù)會(huì)從中心向左或向上移動(dòng)組件。
?
horizontalCenter 和 verticalCenter 樣式指定從容器中心的偏移 (以像素計(jì)), 應(yīng)將控件置于此處。 下面的示例中的 Button 控件將兩個(gè)樣式都設(shè)置為 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>
?
一個(gè)更加復(fù)雜的示例
?
下面的這個(gè)示例使用基于限制的布局來居中 Label 控件并使 Button 控件拉伸至幾乎 Panel 的完全長度。 將 Label 控件的 top 屬性設(shè)置為 10 以限制它看起來與 Panel 的頂部的距離為 10 像素。 將其 horizontalCenter 屬性設(shè)置為 10 以完美地將它在 Panel 中居中。
?
將 Button 控件的 left 和 right 屬性設(shè)置為 10 以使它拉伸至距離 Panel 的每一邊都在 10 像素內(nèi)。 將其底邊屬性設(shè)置為 10 以限制其底邊距離 Panel 的下邊為 10 個(gè)像素。
?
下面的圖說明您以可視方式設(shè)置的屬性的效果。 可視布局控件是 Flex Builder 2 的設(shè)計(jì)視圖的組成部分。
?
?
提示: 不要使用 verticalCenter 樣式屬性指定 top 或 bottom 樣式屬性, verticalCenter 值會(huì)覆蓋其他屬性。 類似地, 不要使用 horizontalCenter 樣式屬性指定 left 或 right 樣式屬性。
由基于限制的布局確定的大小會(huì)覆蓋任何顯式或基于百分比的大小規(guī)范。 例如, 如果您指定 left 和 right 樣式屬性, 產(chǎn)生的基于限制的寬度會(huì)覆蓋由 width 或 percentWidth 屬性設(shè)置的任何寬度。
?
示例
?
<?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>
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
