# FastWeb页面布局

• 适用平台：WEB(桌面)，APP(移动)

# 1. 简介

  程序内的控件的布局，即对控件的位置，大小，顺序层级的排布，与程序的功能实现同样重要。好的页面布局能够让控件的排布更加有序，且层级清晰。同时能让界面更加美观。本文档将从布局的角度介绍布局相关的说明。

# 2. 基础知识

  在开始布局模式的介绍前，您应该先对布局有个基本的概念。

什么是布局？

  在FastWeb中，布局是指窗口中的各个控件的排布方式，即控件的相对位置以及层级排布的统称。

为什么要布局？

  因为FastWeb是网页应用程序，要求要在不同的分辨率下能够保持较为统一的样式，避免因为分辨率的变化导致布局出现混乱。

# 3. 布局模式

  FastWeb中支持两种布局模式，一种是服务端布局模式，另外一种是客户端布局的模式。接下来将对这两种布局模式进行详细介绍。

# 3.1. 服务端布局模式

  使用服务端的布局模式，在进入模块设计界面创建初始界面时，要将UgWebRunFrame中的AlignmentControl设置为uniAlignmentServer，此时表示为使用服务器定义的布局模式。

  FastWeb使用两种属性来提供不同的布局方式。分别为Align与Anchor。

# 3.1.1. Align

Align表示为控件布局中的对齐方式，对齐的意思就是向哪个方向靠拢。使用该属性可在窗体或面板上将组件排列到顶端、底端、左边或右边等多种对齐方式，并且即使窗体、面板或包含组件的大小发生变化，也仍然会保持对齐方式。可以使窗体以某种方式对齐，我们可以在这个属性的下拉框中看到以下选项：

名称	说明	图例
alBottom	组件被移到容器的底端
alClient	使组件填充整个容器
alCustom	以自定义方式显示窗体
alLeft	组件被移到容器的左端
alNone	组件仍然在其原来的位置
alRight	组件被移到容器的右端
alTop	组件被移到容器的顶端

  通过上述的属性设置，我们可以十分轻松地做出下图图示中的效果：

其中的各个控件的Align属性分别设置如下：

# 3.1.2. Anchor

  Anchor表示为锚点，它用来表示控件与窗口各边框的固定的距离。在设置相关的属性后，即使改变窗口的大小也不会使得相关的边界距离发生变化，具体的设置项如下：

# 3.2. 客户端布局模式

  使用客户端的布局模式，在进入模块设计界面创建初始界面时，要将UgWebRunFrame中的AlignmentControl设置为uniAlignmentClient，此时表示为使用客户端(浏览器)定义的布局模式。

  支持容器模式的控件(即作为容器，其中可以包含其他控件)中通常会包含Layout属性，该属性中有以下样式可选：

  在桌面模式下，有以下模式可选：

  在移动模式下，有以下模式可选：

# 3.2.1. absolute(绝对布局)

  在此模式下，所有的控件会按照设计模式下定义的宽度与高度和锚点位置进行布局，缩放窗口大小不会改变其大小及位置。

# 3.2.2. accordion(关联布局)

  即所有的容器会进行关联排序布局，这种布局适用在Panel类型的布局中，点击其中的一个Panel，其余Panel会自动收起。参考图如下：

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

• UgPanel01、UgPanel02、UgPanel03属性说明

# 3.2.3. anchor(锚布局)

  锚布局将其中包含的控件根据固定的点位进行布局。参考图示如下，第一个图表示为按照其50%的宽度进行布局，第二个图表示按照窗口宽度减去100像素布局，第三个面板表示按照窗口宽度减去20像素，按照窗口的高度减去350像素进行布局。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

UgPanel01属性说明

UgPanel02属性说明

UgPanel03属性说明

# 3.2.4. border(边界布局)

  将其中包含的控件按照边界进行布局，与服务端布局模式中的Align类似。布局如下图所示。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

UgPanel01属性说明

UgPanel02属性说明

UgPanel03属性说明

# 3.2.5. fit(自适应布局)

  自适应布局用于设置其中的控件完全铺满空间。图片如下所示，可设置BodyPadding使其有边界边框。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

UgPanel01属性说明

UgPanel02属性说明

UgPanel03属性说明

UgPanel03是UgPanel01中的子控件。

UgPanel04属性说明

UgPanel04是UgPanel02中的子控件。

# 3.2.6. form(窗体布局)

  窗体布局使用于对字段进行排列时使用，方便进行对齐的操作。示意图如下。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

UgPanel01属性说明

UgEdit01属性说明

  此控件放置于UgPanel01中。

UgEdit02属性说明

  此控件放置于UgPanel01中。

UgEdit03属性说明

  此控件放置于UgPanel01中。

UgHTMLMemo01属性说明

  此控件放置于UgPanel01中。

# 3.2.7. hbox(水平盒布局)

  水平盒布局可以自定控制各控件的统一宽度信息。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

UgPanel01属性说明

UgPanel02属性说明

UgPanel03属性说明

# 3.2.8. table(表格布局)

  将控件按照表格的排列方式进行布局。示例图见下。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

UgButton01属性说明

UgContainerPanel01属性说明

UgBtton01-OnClick事件

Var
  PanelNumber: Integer;

procedure UgButton01OnClick(sender: tobject);
begin
  PanelNumber := PanelNumber + 1;
  with TUgPanel.Create(Self) Do
    Begin
      Parent := UgContainerPanel01;
      Caption := 'UgPanel-'+IntToStr(PanelNumber);
      Name := 'UgPanelTable'+IntToStr(PanelNumber);
      Height := 35;
      LayoutConfig.Width := '100%';
    End;
end;

# 3.2.9. vbox(垂直盒布局)

  垂直盒布局中的内容根据宽度进行自动布局，示例见下：

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

UgPanel01属性说明

UgPanel02属性说明

UgPanel03属性说明