這是看到最詳細的關於uniGUI頁面布局使用的文章，轉過來，感謝作者，以下為原文：
（unigui的頁面布局還是很強大的，基本什么的排版都能搞好。前面部分為原文章翻譯，翻譯不一定很准確，就能看吧，后面有使用說明，有什么不明白的歡迎加我QQ（910300653）一起交流學習）
一、布局方式
1、傳統Delphi程序的布局方法
通過將屬性Align添加到類TControl, Delphi開始為VCL提供對齊特性。
Align屬性確定控件在其容器(父控件)中的對齊方式。
使用Align將控件對齊到窗體或面板的頂部、底部、左側或右側，即使包含該控件的窗體、面板或組件的大小發生更改，也要使其保持在那里。當父控件被調整大小時，對齊的控件也會調整大小，以便它繼續跨越父控件的上、下、左或右邊緣。
通過將屬性Align添加到類TControl, Delphi開始為VCL提供對齊特性。Align屬性確定控件在其容器(父控件)中的對齊方式。使用Align將控件對齊到窗體或面板的頂部、底部、左側或右側，即使包含該控件的窗體、面板或組件的大小發生更改，也要使其保持在那里。當父控件被調整大小時，對齊的控件也會調整大小，以便它繼續跨越父控件的上、下、左或右邊緣。例如，要使用帶有各種控件的面板組件作為工具面板，請將面板的Align值更改為alLeft。面板Align屬性的alLeft值確保工具面板始終位於表單的左側，並且始終等於表單的客戶機高度。Align的默認值是alNone，這意味着控件仍然位於它在窗體或面板上的位置。提示:如果Align設置為alClient，控件將填充整個客戶端區域，因此不可能通過單擊它來選擇父表單。在這種情況下，通過選擇窗體上的控件並按ESC或使用對象檢查器來選擇父控件。單個父組件中的任意數量的子組件都可以具有相同的Align值，在這種情況下，它們會沿着父組件的邊緣堆積起來。子控件按z順序堆疊。若要調整控件的堆疊順序，請將控件拖放到所需的位置。注意:要使控件與其父控件的邊保持指定的關系，但不一定位於父控件的一條邊，請使用anchor屬性。較新的Delphi版本添加了幾個面板，如TRelativePanel、TStackPanel、TCardPanel等。引入這些新控件是為了匹配web應用程序常見的一些特性。
2、unigui應用程序的布局方法
uniGUI使用Sencha ExtJS作為客戶端JavaScript代碼的“呈現引擎”，並利用其中定義的對齊和大小選項(名為“layouts”)。
但是uniGUI也允許開發人員保持Delphi對齊。屬性AlignmentControl接受兩個值:uniAlignmentServer和uniAlignmentClient。前者保持基於像素的Delphi絕對對齊，而后者基於所選的布局和另外兩個屬性(LayoutAttribs和LayoutConfig)請求客戶端對齊。
可用的布局如下
| 布局 |
描述 |
| 每個組件將使用預先定義的像素坐標 |
|
| 以可擴展的手風琴樣式管理多個面板，以便默認情況下在任何給定時間只能展開一個面板 |
|
| 它相當於“無布局”，將布局留給容器內的組件 |
|
| 這是一種多窗格、面向應用程序的UI布局樣式，支持多個嵌套面板、區域間的自動條/分隔符以及內置的區域展開和折疊 |
|
| 這是一個包含單個項的布局，該項會自動展開以填充布局的容器 |
|
| 這是一個將呈現表單字段的布局，一個在另一個下面，所有字段都伸展到容器寬度 |
|
| 在容器中水平排列項目的布局。這種布局可選地在包含數字flex配置的子項之間划分可用的水平空間 |
|
| 在容器中垂直排列項目的布局。這種布局可選地在包含數字flex配置的子項之間划分可用的垂直空間 |
|
| 這種布局允許您輕松地將內容呈現到HTML表中。可以指定列的總數，並且可以使用rowspan和colspan在表中創建復雜的布局 |
|
| 這是在多列格式中創建結構布局時所選擇的布局樣式，其中每個列的寬度可以指定為百分比或固定寬度，但允許根據內容的不同而改變高度 |
二、客戶端布局方式
- LayoutAbsolute（絕對布局）
這種布局繼承了容器錨的錨定，並使用標准的x和y組件配置選項添加了x/y定位功能。
2.LayoutAccordion（手風琴布局）
這是一種以可擴展的手風琴樣式管理多個面板的布局，在默認情況下，任何給定時間只能展開一個面板。每個面板都內置了對展開和折疊的支持。
（注意:只有面板和它的所有子類可以在折疊布局容器中使用。）
3.LayoutAnchor（錨定布局）
這是一種布局，允許錨定包含的元素相對於容器的尺寸。如果容器被調整了大小，所有錨定項將根據它們的錨定規則自動重新呈現。默認情況下，AnchorLayout將根據容器本身的大小計算錨點測量值。但是，使用錨點布局的容器可以提供錨點大小的特定於錨點的配置屬性。如果錨定尺寸是特定的，布局將使用它作為一個虛擬容器，用於計算基於它的錨定測量，而不是允許容器在必要時獨立於錨定邏輯進行大小調整。
4.LayoutAuto（自動布局）
AutoLayout是容器委托的默認布局管理器，用於在容器中沒有配置布局時呈現任何子組件。AutoLayout只提供對任何子容器的任何布局調用的傳遞
5.LayoutBorder（邊界布局）
這是一種多窗格、面向應用程序的UI布局樣式，支持多個嵌套面板、區域之間的自動條以及內置的區域展開和折疊。
6.LayoutFit（自適應布局）
此布局包含一個單獨的項，該項將自動展開以填充布局的容器。
7.LayoutForm（表單布局）
這個布局將呈現表單字段，一個在另一個下面，所有字段都伸展到容器寬度。
該表單將使用以下屬性呈現標簽和字段編輯器:
FieldLabel
FieldLabelAlign - Lelft，右，上
FieldLabelFont——TUniFont
FieldLabelSeparator -默認是':'
FieldLabelWidth -默認值為“100”
8.LayoutHBox（水平布局）
此布局在容器中水平排列項。這種布局可選地在包含數字flex配置的子項之間划分可用的水平空間。每個具有flex屬性的子項目將根據該項目的相對flex值(與指定flex值的所有項目的總和相比)填充空間(水平填充在LayoutHBox中，垂直填充在LayoutVBox中)。任何帶有flex zero或未定義的子條目都不會被“彎曲”(初始大小不會改變)。此布局可用於通過使用align選項配置子項的高度或垂直位置。可以使用LayoutConfig設置子項的水平位置。
9.LayoutVBox（垂直布局）
這種布局將項目垂直地排列在容器下面。這種布局可選地在包含數字flex配置的子項之間划分可用的垂直空間。
此布局還可以通過使用Align選項配置來設置子項的寬度。可以使用LayoutConfig設置子項的垂直位置。
10.LayoutTable（表格布局）
這種布局允許您輕松地將內容呈現到HTML表中。可以指定列的總數，並且可以使用rowspan和colspan在表中創建復雜的布局。對於TableLayout，惟一有效的布局配置屬性是列和tableAttrs。但是，添加到TableLayout中的項可以提供以下特定於表的配置屬性:colspan應用於包含該項的表單元格。cellCls是添加到包含該項的表單元格中的CSS類名。從概念上講，構建表布局的基本概念與構建標准HTML表非常相似。您只需添加希望包含的每個面板(或“單元格”)以及指定為rowspan和colspan的特殊配置屬性的任何span屬性，這些屬性的工作方式與HTML中的對應屬性完全相同。不像在HTML中那樣顯式地創建和嵌套行和列，只需在布局配置中指定列總數，並開始按照從左到右、從上到下的自然順序添加面板。布局將根據列數、行間距和colspan自動計算出如何在表中定位每個面板。就像HTML表一樣，rowspan和colspan必須在整個布局中正確地相加，否則最終會丟失和/或多余的單元格。
11.LayoutColumn（列布局）
寬度屬性總是以像素計算，並且必須是大於或等於1的數字。ColumnWidth屬性總是以百分數的形式計算，並且必須是一個大於0且小於1的小數值(例如.25)。指定列寬度的基本規則非常簡單。該邏輯通過包含的面板集進行兩次傳遞。在第一次布局過程中，跳過所有具有固定寬度或沒有指定寬度(auto)的面板，但是從總體容器寬度中減去它們的寬度。在第二次遍歷期間，所有具有列寬的面板都將根據剩余容器寬度的百分比按像素寬度分配。換句話說，百分比寬度面板用於填充所有固定寬度和/或自動寬度面板所剩的空間。因此，雖然可以用不同的百分比指定任意數量的列，但列寬相加時必須始終為1(或100%)，否則布局可能無法按預期呈現。
三、客戶端布局的一些常用參數說明
1、LayoutConfig.Flex
指定子容器在父容器子分配的大小，如父容器（LayoutHBox），子容器1的Flex為1，子容器2的Flex為2，子容器3的Flex為2，則3個子容器的寬度分別是總寬度的1/(1+2+2)、2/(1+2+2)、2/(1+2+2)，當總寬度發生變化時，各子容器的寬度也會按比例變化。垂直布局使用方法也是一樣。
2、LayoutConfig.Margin
用來指定容器與其它容器的四邊間隔，4個參數分別為上、右、下、左（如：10 10 10 10）表示四邊的間隔都為10像素。
3、LayoutConfig.Width（LayoutConfig.Height）
用來指定實際的寬度，可以用百分比來設置（如LayoutConfig.Width =30%，將占父容器總寬度的30%），高度也是一樣的使用方法。