佈局控制元件
# PinToo控制元件使用(佈局設計)
該組中包含了用於客戶端佈局設計的所有界面型別控制元件，通過佈局的設計可以幫助使用者更好實現頁面的佈局效果，減少因為終端設備解析度不同而導致的顯示異常。
# 1. TfxLayout元件
- 引用單元 FMXLayouts
佈局元件是其他圖形對象的容器。
當您需要在同一父項下組織多個圖形控制元件時，請使用佈局元件。
例如，當您需要建立功能豐富的FireMonkey應用程式時，可以使用這些佈局，這些應用程式具有在同一層上分組的許多圖形控制元件。您可以通過影響佈局的可見性來一次設定佈局上所有控制元件的可見性。
# 2. TfxScaledLayout元件
- 引用單元 FMXLayouts
當FireMonkey縮放佈局是經包裝的TControl和作用就像用於與根據該佈局的物理尺寸縮放其內容的可能性的其他對象的層。
縮放的佈局是其他圖形對象的容器，可以對其內容進行縮放，如下圖所示。
標籤和按鈕將根據包含作為客戶對齊的圖層的表單的尺寸進行縮放，以使該圖層佔據整個表面。
# 3. TfxGridLayout元件
- 引用單元 FMXLayouts
將子控制元件排列在大小相等的單元格的網格中的控制元件。
當用TfxGridLayout網格佈局時，如下圖效果所示作為TfxButtonr的容器：
需要調整TfxGridLayout的Item（子控制元件）大小時，可通過ItemHeight和ItemWidth屬性指定大小。如果將方向設定為Horizontal（水平），則將TfxGridLayout的Item（子控制元件）逐行排列，直到在網格中新增新行時超出佈局的寬度為止。如果將方向設定為Vertical（垂直），則在將新列新增到網格時，TfxGridLayout的子控制元件將一個接一個地放置，直到超出佈局的高度為止。
但是，您可以使用子控制元件的Margins（邊緣）屬性自定義子控制元件的大小。例如，下圖演示了Button5，Button6，Button7和Button8子控制元件使用不同邊距的用法：
在這裡我們設定：
- Button5的頂部和底部邊距。
- Button6的左邊距。
- 這四頂，左，右和底邊距Button7。
- Button8的頂部和左側邊距。
檢視如何調整子控制元件的大小並將其放置在各個網格單元內。
注意：將忽略TGridLayout中控制元件的Align屬性。將自動設定子控制元件的Position，Height和Width屬性，並且顯式更改其值無效。
# 4. TfxGridPanelLayout元件
- 引用單元 FMXLayouts
實現網格面板佈局控制元件，其中每個元件都放置在網格面板上的單元格內。
在TGridPanelLayout佈局中，您可以在網格面板上指定行數和列數，然後將每個元件放置到網格面板中的下一個可用單元格中，而不管用滑鼠將其放置在何處。如果每個網格面板佈局的單元格已經包含一個控制元件，並且您新增了更多控制元件，則新控制元件的位置由ExpandStyle屬性確定。例如，使用ExpandStyle屬性的預設AddRows值，將新行新增到網格面板，並且該行中的每個單元格都可以包含一個新控制元件。
TfxGridPanelLayout佈局提供以下行為：
您可以顯式設定子控制元件的Height（高度）， Width（寬度），Align（對齊方式）和Anchors屬性，以手動調整和對齊放置在TfxGridPanelLayout佈局的單元格內的子控制元件的大小：
例如，您可以指定子控制元件可以跨多個合併的單元格。看下圖：
在這裡，B4按鈕跨在最右邊一列的兩個單元格上，B5按鈕在兩行兩列中佔據四個單元格，而B8按鈕在下一行中佔據三個單元格。
若要指定子控制元件可以跨幾個單元格，可以使用以下技巧：
- 在「 結構」檢視中，找到所需的TfxGridPanelLayout佈局節點。
- 在此節點下，找到相應的Control Collection節點。
- 在此控制元件中Control Collection，選擇與所需子控制元件關聯的控制元件。在Properties（屬性檢視器）中顯示了這個控制項的屬性。
- 在ColumnSpan屬性中，鍵入相應列中的控制元件項可以佔用的單元格數（在Column屬性中指定）。
- 在RowSpan屬性中，鍵入相應行中的控制元件項可以佔用的單元格數（在Row屬性中指定）。
# 5. TfxFlowLayoutBreak元件
- 引用單元 FMXLayouts
TfxFlowLayoutBreak在運行時不可見，將其用作獨立對像無效。它僅作為TfxFlowLayout的子級才有效。
# 6. TfxFlowLayout元件
- 引用單元 FMXLayouts
TfxFlowLayout的子項一行一行地排列。當超過佈局的寬度時，剩餘的子控制元件將換行到下一行，依此類推，直到所有控制元件都被放置。如要在一個普通的文字新增換行符一樣的效果，加一個TfxFlowLayoutBreak到目前TfxFlowLayout中實現。
控制元件流向可以從左到右或從右到左。要更改方向，請設定FlowDirection（流向）屬性。更改方向不會更改控制元件的行，而只會更改控制元件在每行上的順序。
可以通過設定HorizontalGap（水平間隙）和VerticalGap（垂直間隙）屬性來自定義同一行中控制元件之間的距離以及行之間的距離。
可以通過Justify屬性自定義對齊方式，設定TfxFlowLayout，left（左），Right（右），Center（中心）或justified（調整）屬性調整子控制元件們在一個段落字對齊方式。佈局中最後一行的對齊方式將單獨處理，可以通過JustifyLastLine（調整最後一行）屬性設定。如果只有一行，則Justify（調整）無效，該行被視為最後一行，並根據JustifyLastLine（調整最後一行）對齊。
注意：將忽略TfxFlowLayout中控制元件的Align（對齊）屬性。子控制元件的Position（位置）屬性是自動設定的，顯式更改其值無效。
TfxFlowLayout元件可以用來獲得這樣的結果：
# 7. TfxScrollBox元件
- 引用單元 FMXLayouts
TfxScrollBox作為一個滾動框元件，可以使元件位於其中，當其中元件超過了顯示的邊緣，可以產生上下左右的滾動條。
# 8. TfxVertScrollBox元件
- 引用單元 FMXLayouts
TfxVertScrollBox作為一個滾動框元件，可以使元件位於其中，與TfxScrollBox不同的是，該元件只會在垂直方向上產生滾動條。
# 9. TfxSuperVertScrollBox元件
- 引用單元 FMXLayouts
TfxSuperVertScrollBox的作用與功能和TfxVerScrollBox相似，具有垂直方向上的滾動條，與TfxSuperVertScrollBox元件不同的是，該元件還增加了位於垂直方向上的向上拖動與向下拖動滑塊，可根據操作觸發相應的事件。
# 10. TfxHorzScrollBox元件
- 引用單元 FMXLayouts
TfxHorzScrollBox作為一個滾動框元件，可以使元件位於其中，與TfxScrollBox不同的是，該元件只會在水平方向上產生滾動條。
# 11. TfxFramedScrollBox元件
- 引用單元 FMXLayouts
TfxFramedScrollBox 繪製邊緣（上，左，下和右），並用特殊顏色來填充控制元件矩形。因此相較於TfxScrollBox，TfxFramedScrollBox滾動框可以從父控制元件的背景中突出顯示。
# 12. TfxFramedVertScrollBox元件
- 引用單元 FMXLayouts
TfxFramedVertScrollBox的作用與功能和TfxFramedScrollBox相似，與TfxFramedScrollBox元件不同的是，該元件僅有位於垂直方向上的滾動條。