Delphi XE UniGUI 之布局

1、常用布局属性：

       AlignmentControl：

• • uniAlignmentServer  //基于像素的Delphi绝对对齐
  • uniAlignmentClient  //基于所选的布局和另外两个属性(LayoutAttribs和LayoutConfig)请求客户端对齐

　　Layout ：

• • absolute  //每个组件将使用预先定义的像素坐标
  • accordion  //以可扩展的手风琴样式管理多个面板，以便默认情况下在任何给定时间只能展开一个面板
  • auto  //它相当于“无布局”，将布局留给容器内的组件
  • border  //这是一种多窗格、面向应用程序的UI布局样式，支持多个嵌套面板、区域间的自动条/分隔符以及内置的区域展开和折叠
  • fit  //这是一个包含单个项的布局，该项会自动展开以填充布局的容器
  • form  //这是一个将呈现表单字段的布局，一个在另一个下面，所有字段都伸展到容器宽度
  • hbox  //在容器中水平排列项目的布局。这种布局可选地在包含数字flex配置的子项之间划分可用的水平空间
  • vbox  //在容器中垂直排列项目的布局。这种布局可选地在包含数字flex配置的子项之间划分可用的垂直空间
  • table  //这种布局允许您轻松地将内容呈现到HTML表中。可以指定列的总数，并且可以使用rowspan和colspan在表中创建复杂的布局
  • column  //这是在多列格式中创建结构布局时所选择的布局样式，其中每个列的宽度可以指定为百分比或固定宽度，但允许根据内容的不同而改变高度

2、客户端布局（uniAlignmentClient）

• LayoutAbsolute（绝对布局）//这种布局继承了容器锚的锚定，并使用标准的x和y组件配置选项添加了x/y定位功能。
• LayoutAccordion（手风琴布局）//这是一种以可扩展的手风琴样式管理多个面板的布局，在默认情况下，任何给定时间只能展开一个面板。每个面板都内置了对展开和折叠的支持。（注意:只有面板和它的所有子类可以在折叠布局容器中使用。）
• LayoutAnchor（锚定布局）//这是一种布局，允许锚定包含的元素相对于容器的尺寸。如果容器被调整了大小，所有锚定项将根据它们的锚定规则自动重新呈现。默认情况下，AnchorLayout将根据容器本身的大小计算锚点测量值。但是，使用锚点布局的容器可以提供锚点大小的特定于锚点的配置属性。如果锚定尺寸是特定的，布局将使用它作为一个虚拟容器，用于计算基于它的锚定测量，而不是允许容器在必要时独立于锚定逻辑进行大小调整。
• LayoutAuto（自动布局）//AutoLayout是容器委托的默认布局管理器，用于在容器中没有配置布局时呈现任何子组件。AutoLayout只提供对任何子容器的任何布局调用的传递
• LayoutBorder（边界布局）//这是一种多窗格、面向应用程序的UI布局样式，支持多个嵌套面板、区域之间的自动条以及内置的区域展开和折叠。
• LayoutFit（自适应布局）//此布局包含一个单独的项，该项将自动展开以填充布局的容器。
• LayoutForm（表单布局）//这个布局将呈现表单字段，一个在另一个下面，所有字段都伸展到容器宽度。该表单将使用以下属性呈现标签和字段编辑器:LayoutHBox（水平布局）//此布局在容器中水平排列项。这种布局可选地在包含数字flex配置的子项之间划分可用的水平空间。每个具有flex属性的子项目将根据该项目的相对flex值(与指定flex值的所有项目的总和相比)填充空间(水平填充在LayoutHBox中，垂直填充在LayoutVBox中)。任何带有flex zero或未定义的子条目都不会被“弯曲”(初始大小不会改变)。此布局可用于通过使用align选项配置子项的高度或垂直位置。可以使用LayoutConfig设置子项的水平位置。
  • FieldLabel
  • FieldLabelAlign   //Lelft，right，top
  • FieldLabelFont    //TUniFont
  • FieldLabelSeparator  //默认值‘:‘
  • FieldLabelWidth //默认值“100”
• LayoutVBox（垂直布局）//这种布局将项目垂直地排列在容器下面。这种布局可选地在包含数字flex配置的子项之间划分可用的垂直空间。此布局还可以通过使用Align选项配置来设置子项的宽度。可以使用LayoutConfig设置子项的垂直位置。
• LayoutTable（表格布局）//这种布局允许您轻松地将内容呈现到HTML表中。可以指定列的总数，并且可以使用rowspan和colspan在表中创建复杂的布局。对于TableLayout，惟一有效的布局配置属性是列和tableAttrs。但是，添加到TableLayout中的项可以提供以下特定于表的配置属性:colspan应用于包含该项的表单元格。cellCls是添加到包含该项的表单元格中的CSS类名。从概念上讲，构建表布局的基本概念与构建标准HTML表非常相似。您只需添加希望包含的每个面板(或“单元格”)以及指定为rowspan和colspan的特殊配置属性的任何span属性，这些属性的工作方式与HTML中的对应属性完全相同。不像在HTML中那样显式地创建和嵌套行和列，只需在布局配置中指定列总数，并开始按照从左到右、从上到下的自然顺序添加面板。布局将根据列数、行间距和colspan自动计算出如何在表中定位每个面板。就像HTML表一样，rowspan和colspan必须在整个布局中正确地相加，否则最终会丢失和/或多余的单元格。
• LayoutColumn（列布局）//宽度属性总是以像素计算，并且必须是大于或等于1的数字。ColumnWidth属性总是以百分数的形式计算，并且必须是一个大于0且小于1的小数值(例如.25)。指定列宽度的基本规则非常简单。该逻辑通过包含的面板集进行两次传递。在第一次布局过程中，跳过所有具有固定宽度或没有指定宽度(auto)的面板，但是从总体容器宽度中减去它们的宽度。在第二次遍历期间，所有具有列宽的面板都将根据剩余容器宽度的百分比按像素宽度分配。换句话说，百分比宽度面板用于填充所有固定宽度和/或自动宽度面板所剩的空间。因此，虽然可以用不同的百分比指定任意数量的列，但列宽相加时必须始终为1(或100%)，否则布局可能无法按预期呈现。

3、客户端布局常用参数

• 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)，当总宽度发生变化时，各子容器的宽度也会按比例变化。垂直布局使用方法也是一样。
• LayoutConfig.Margin  //用来指定容器与其它容器的四边间隔，4个参数分别为上、右、下、左（如：10 10 10 10）表示四边的间隔都为10像素。
• LayoutConfig.Width（LayoutConfig.Height）//用来指定实际的宽度，可以用百分比来设置（如LayoutConfig.Width =30%，将占父容器总宽度的30%），高度也是一样的使用方法。

创建时间：2021.05.27　　更新时间：

Delphi XE UniGUI 之布局