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

可用的布局如下

布局

描述

absolute

每个组件将使用预先定义的像素坐标

accordion

以可扩展的手风琴样式管理多个面板，以便默认情况下在任何给定时间只能展开一个面板

auto

它相当于“无布局”，将布局留给容器内的组件

border

这是一种多窗格、面向应用程序的UI布局样式，支持多个嵌套面板、区域间的自动条/分隔符以及内置的区域展开和折叠

fit

这是一个包含单个项的布局，该项会自动展开以填充布局的容器

form

这是一个将呈现表单字段的布局，一个在另一个下面，所有字段都伸展到容器宽度

hbox

在容器中水平排列项目的布局。这种布局可选地在包含数字flex配置的子项之间划分可用的水平空间

vbox

在容器中垂直排列项目的布局。这种布局可选地在包含数字flex配置的子项之间划分可用的垂直空间

table

这种布局允许您轻松地将内容呈现到HTML表中。可以指定列的总数，并且可以使用rowspan和colspan在表中创建复杂的布局

column

这是在多列格式中创建结构布局时所选择的布局样式，其中每个列的宽度可以指定为百分比或固定宽度，但允许根据内容的不同而改变高度

二、客户端布局方式

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%），高度也是一样的使用方法。
---------------------
作者：sglqh
来源：CSDN
原文：https://blog.csdn.net/sglqh/article/details/86670908
版权声明：本文为博主原创文章，转载请附上博文链接！