UniGUI的布局（结合官方自带DEMO）要点记录

UniGUI的页面布局还是比较方便的，基本什么的排版都能搞好。但UniGUI的资料实在是太少，只能看到一些零星的资料，结合UniGUI官方自带的DEMO,本人将布局有关要点整理了一下，方便查阅，也供各位爱好者参考，不对之处，敬请指正。
一、布局方式

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)请求客户端对齐。

属性 layout 可用的布局如下:

二、各种布局方式要点
首先，要采用客户端布局方式，必须在 MainForm 的属性AlignmentControl 设置为：uniAlignmentClient。
1. absolute（绝对布局）
这种布局继承了容器锚的锚定，并使用标准的x和y组件配置选项添加了x/y定位功能。
2. accordion（手风琴布局）
这是一种以可扩展的手风琴样式管理多个面板的布局，在默认情况下，任何给定时间只能展开一个面板。每个面板都内置了对展开和折叠的支持。
（注意:只有面板和它的所有子类可以在折叠布局容器中使用。）
要点：
MainForm: 属性AlignmentControl=uniAlignmentClient、 layout = fit
UniPanelA : 属性 layout = accordion （UniPanelA 为UniPanel1、UniPanel2、UniPanel3 父容器，UniPanel1、UniPanel2、UniPanel3 按照accordion布局）
UniPanel1、UniPanel2、UniPanel3 : 属性 layout = fit （子组件的layout = fit是为了其子组件的布局）
(DEMO:参考 ..\UniGUI_Demos\Desktop\Clientside Alignment - Layout Accordion\AccordionLayout.dproj)
3. anchor（锚定布局）
这是一种布局，允许锚定包含的元素相对于容器的尺寸。如果容器被调整了大小，所有锚定项将根据它们的锚定规则自动重新呈现。默认情况下，AnchorLayout将根据容器本身的大小计算锚点测量值。但是，使用锚点布局的容器可以提供锚点大小的特定于锚点的配置属性。如果锚定尺寸是特定的，布局将使用它作为一个虚拟容器，用于计算基于它的锚定测量，而不是允许容器在必要时独立于锚定逻辑进行大小调整。
要点：
MainForm: 属性AlignmentControl=uniAlignmentClient、 layout = fit
父容器UniContainerPanel1 ：属性 layout = anchor
子件：UniPanel1 ：layoutcofig.anchor 设置 50%，表示 UniPanel1 的宽度是其父容器宽度的 50%；
子件：UniPanel2 ：layoutcofig.anchor 设置 -100，表示 UniPanel2 的宽度是其父容器宽度减去 100px;
子件：UniPanel3 ：layoutcofig.anchor 设置 -20 -100 表示 UniPanel3 的宽度、高度是其父容器宽度、高度分别减去 20px、250px;
(DEMO:参考 ..\UniGUI_Demos\Desktop\Clientside Alignment - Layout Anchor\AnchorLayout.dproj)

锚定规则anchor说明：
格式：'宽值 高值'。1、百分比 2、固定值。
例如：
anchor: '50% 30%' //宽高分别占父容器50%，30%
anchor: '-100 50%' //宽距父容器右边100像素，高度为50%
官方资料：
Offset to apply to the control inside the container.（相对其父容器的偏移量）
例子:
Anchor = '-20 -250' means set Width = Container.Width - 20 and Height = Container.Height - 250
Anchor = '-100' means to set Width = Container.Width - 100
Anchor = '50%' means to set Width = 0.5 * Container.Width

4. auto（自动布局）
auto是容器委托的默认布局管理器，用于在容器中没有配置布局时呈现任何子组件。AutoLayout只提供对任何子容器的任何布局调用的传递.
5. Border（边界布局）
这是一种多窗格、面向应用程序的UI布局样式，支持多个嵌套面板、区域之间的自动条以及内置的区域展开和折叠。
要点：
MainForm: 属性AlignmentControl=uniAlignmentClient、 layout = fit
父容器UniContainerPanel1 ：属性 layout = border
子件：UniPanel1 ：layoutcofig.Region = west (对应地图 方位为西方，即：左边)；layoutcofig.Split = True (可调整宽度);Collapsible = True (可折叠)。
子件：UniPanel2 ：layoutcofig.Region = center； layoutcofig.Split = false
子件：UniPanel3 ：layoutcofig.Region = south; layoutcofig.Split = True (可调整高度)
(DEMO:参考 ..\UniGUI_Demos\Desktop\Clientside Alignment - Layout Border\BorderLayout.dproj)

layoutcofig.Region:When using border layout, it specifies how to align the control: West, East, North, South, or Center.（当使用边框布局时，它指定如何对齐控件：西、东、北、南或中心。）

6. fit（自适应布局）
此布局包含一个单独的项，该项将自动展开以填充布局的容器。
要点：
MainForm: 属性AlignmentControl=uniAlignmentClient、 layout = hbox (在MainForm下面的组件是水平布局)、layoutcofig.BodyPadding = 20 (内边界20px)
UniPanelA、UniPanelB : 属性 layout = fit, layoutcofig.flex = 1 layoutcofig.Height = 100%;
UniPanelA 属性：layoutcofig.BodyPadding = 15
(DEMO:参考 ..\UniGUI_Demos\Desktop\Clientside Alignment - Layout Fit\FitLayout.dproj)

7. form（表单布局）
这个布局将呈现表单字段，一个在另一个下面，所有字段都伸展到容器宽度。
该表单将使用以下属性呈现标签和字段编辑器:
FieldLabel
FieldLabelAlign - Lelft，右，上
FieldLabelFont——TUniFont
FieldLabelSeparator -默认是':'
FieldLabelWidth -默认值为“100”
要点：
MainForm: 属性AlignmentControl=uniAlignmentClient、 layout = vbox (在MainForm下面的组件是垂直布局)、layoutcofig.BodyPadding = 15 (内边界15px)
父容器UniPanel1 ：属性 layout = form，其子组件按照 Form （表单）方式布局、layoutcofig.flex = 4 、layoutcofig.BodyPadding = 5；
另外一个父容器UniContainerPanel2 ：layoutcofig.flex = 1
(DEMO:参考 ..\UniGUI_Demos\Desktop\Clientside Alignment - Layout Form\FormLayout.dproj)

8. hbox（水平布局）
此布局在容器中水平排列项。这种布局可选地在包含数字flex配置的子项之间划分可用的水平空间。每个具有flex属性的子项目将根据该项目的相对flex值(与指定flex值的所有项目的总和相比)填充空间(水平填充在LayoutHBox中，垂直填充在LayoutVBox中)。任何带有flex zero或未定义的子条目都不会被“弯曲”(初始大小不会改变)。
此布局可用于通过使用align选项配置子项的高度或垂直位置。可以使用LayoutConfig设置子项的水平位置 。(？？？不知道如何设置，暂且记下)
要点：
MainForm: 属性AlignmentControl=uniAlignmentClient、 layout = fit
父容器UniContainerPanel1 ：属性 layout = hbox (UniPanel1、UniPanel2、UniPanel3 按照 hbox 水平布局)
子组件 UniPanel1、UniPanel2、UniPanel3 属性 layoutcofig.flex 和 layoutcofig.Height 进行分别设置。
(DEMO:参考 ..\UniGUI_Demos\Desktop\Clientside Alignment - Layout HBox\HBoxLayout.dproj)

9. VBox（垂直布局）
这种布局将项目垂直地排列在容器下面。这种布局可选地在包含数字flex配置的子项之间划分可用的垂直空间。
此布局还可以通过使用Align选项配置来设置子项的宽度。可以使用LayoutConfig设置子项的垂直位置。(？？？不知道如何设置，暂且记下)
要点可参考上面的 hbox（水平布局）。
(DEMO:参考 ..\UniGUI_Demos\Desktop\Clientside Alignment - Layout VBox\VBoxLayout.dproj)

10. Table（表格布局）
这种布局允许您轻松地将内容呈现到HTML表中。可以指定列的总数，并且可以使用rowspan和colspan在表中创建复杂的布局。对于TableLayout，惟一有效的布局配置属性是列和tableAttrs。但是，添加到TableLayout中的项可以提供以下特定于表的配置属性:colspan应用于包含该项的表单元格。cellCls是添加到包含该项的表单元格中的CSS类名。从概念上讲，构建表布局的基本概念与构建标准HTML表非常相似。您只需添加希望包含的每个面板(或“单元格”)以及指定为rowspan和colspan的特殊配置属性的任何span属性，这些属性的工作方式与HTML中的对应属性完全相同。不像在HTML中那样显式地创建和嵌套行和列，只需在布局配置中指定列总数，并开始按照从左到右、从上到下的自然顺序添加面板。布局将根据列数、行间距和colspan自动计算出如何在表中定位每个面板。就像HTML表一样，rowspan和colspan必须在整个布局中正确地相加，否则最终会丢失和/或多余的单元格。
要点：
这是DEMO中第一个例子的主要属性配置：
MainForm: 属性AlignmentControl=uniAlignmentClient、layout = fit、layoutcofig.BodyPadding = 15、WindowState = wsMaximized
父容器UniContainerPanel1 ：属性 layout = table、LayoutAttribs.Columns = 3 (3 列布局)。
点击按钮，动态生成一个UniPanel,在父容器UniContainerPanel1中，按照table布局。
(DEMO-1:参考 ..\UniGUI_Demos\Desktop\Clientside Alignment - Layout Table\TableLayout.dproj)
这是DEMO中第二个例子的主要属性配置（主要演示 利用layoutcofig.colspan 和 layoutcofig.rowspan 实现跨列和跨行的布局）：
MainForm: 属性AlignmentControl=uniAlignmentClient、layout = fit。
父容器UniContainerPanel1 ：属性 layout = table、LayoutAttribs.Columns = 3 (3 列布局)。
子组件 UniPanel1 ： 属性 layoutcofig.RowSpan = 2 (表示夸两行)、 layoutcofig.width = '100%'
子组件 UniPanel2 ： 属性 layoutcofig.ColSpan = 2 (表示夸两列)、 layoutcofig.width = '100%'
子组件 UniPanel3、UniPanel4 ： 属性 layoutcofig.width = '100%'
(DEMO-2:参考 ..\UniGUI_Demos\Desktop\Clientside Alignment - Layout Table Span\TableSpanLayout.dproj)。

11. Column（列布局）
宽度属性总是以像素计算，并且必须是大于或等于1的数字。ColumnWidth属性总是以百分数的形式计算，并且必须是一个大于0且小于1的小数值(例如.25)。指定列宽度的基本规则非常简单。该逻辑通过包含的面板集进行两次传递。在第一次布局过程中，跳过所有具有固定宽度或没有指定宽度(auto)的面板，但是从总体容器宽度中减去它们的宽度。在第二次遍历期间，所有具有列宽的面板都将根据剩余容器宽度的百分比按像素宽度分配。换句话说，百分比宽度面板用于填充所有固定宽度和/或自动宽度面板所剩的空间。因此，虽然可以用不同的百分比指定任意数量的列，但列宽相加时必须始终为1(或100%)，否则布局可能无法按预期呈现。
要点：
MainFormDisplayMode 属性 修改为 mfpage 页面显示最大化；
MainForm: 属性AlignmentControl=uniAlignmentClient、layout = fit；
UniContainerPanel1 ：属性 layout = border；其下面的两个子容器 UniPanel1 和 UniPanel2 按照 Border（边界）方式布局；
父容器 UniPanel1 layout = Column、layoutcofig.Region = west、 layoutcofig.width = 30% 宽度占其父容器 UniContainerPanel1的宽度的30%；
子容器 UniFieldSet1 ：属性 layoutcofig.ColumnWidth = 0.5、layoutcofig.height = 50%
子容器 UniFieldSet2 ：属性 layoutcofig.ColumnWidth = 0.5、layoutcofig.height = 75%
父容器 UniPanel2 layout = Column、layoutcofig.Region = center
子容器 UniFieldSet3 ：属性 layoutcofig.ColumnWidth = 0.25、layoutcofig.height = 100%
子容器 UniFieldSet4 ：属性 layoutcofig.ColumnWidth = 0.25、layoutcofig.height = 100%
子容器 UniFieldSet5 ：属性 layoutcofig.ColumnWidth = 0.50、layoutcofig.height = 100%
(DEMO:参考 ..\UniGUI_Demos\Desktop\Clientside Alignment - Layout Column\ColumnLayout.dproj)。

三、客户端布局的一些常用参数说明

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%），高度也是一样的使用方法。

本文参考UniGUI的布局使用说明，加入例子说明整合而成，如有侵权，请告知本人立删。