高级页面布局

使用说明

在低代码平台中，可以通过如下两种模式，开发高级页面。

绝对布局：在绝对布局中，每个组件可在页面中任意位置进行拖拽放置，组件的宽高可自定义设置。绝对布局常用于大屏页面的开发。
流式布局：在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。流式布局常用于常规Web应用开发，例如电商网站、管理网站等。

绝对布局高级页面

创建绝对布局类型的高级页面。
1. 参考登录经典应用设计器中操作，登录经典版应用设计器。
2. 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。
3. 设置高级页面标签和名称，布局类型选择“绝对布局”，单击“添加”。
  图1 新建绝对布局类型高级页面
开发绝对布局类型的高级页面。

以开发如下所示高级页面为例，向您介绍绝对布局类型高级页面中组件的布局方法。
图2 绝对布局类型高级页面组件布局示例

如上图所示，示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。
1. 在高级页面右上方，单击，设置背景图片。
  图3 设置页面背景色示例
2. 查找并拖入该页面中包含的组件，通过拖拽进行初步位置、大小调整。
  图4 拖拽所需的组件到画布中
3. 设置文本编辑组件内容为“绝对布局类型高级页面”，字号为“大号”。
  图5 设置文本编辑组件内容
4. 通过组件属性，精确设置组件大小。
  本例中，设置组件宽度为600px、高度为350px。
  
  图6 精确设置组件大小
5. 复制组件。
  将上图左侧组件逐个复制，并将其拖拽到右侧，通过对齐提示线将其与左侧组件对齐。
  
  图7 复制组件
6. 单击页面上方的，保存页面。
7. 单击，预览高级页面，查看当前页面在运行态的效果。
  图8 预览高级页面

流式布局高级页面

在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。

创建流式布局类型高级页面。
1. 参考登录经典应用设计器中操作，登录经典版应用设计器。
2. 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。
3. 设置高级页面标签和名称，布局类型选择“流式布局”，单击“添加”。
  图9 新建流式布局类型高级页面示例
绝对布局类型高级页面与流式布局类型高级页面不同之处。
1. 在流式布局类型高级页面中，不可拖拽组件位置和大小，同样在“组件属性设置”栏中，也没有位置相关的设置选项。因为流式布局下组件将按照从上到下、从左到右的顺序依次排列。
2. 流式布局类型高级页面的画布划分为12列，新拖入的组件默认宽度为100%，即占据12列。
  也可以通过拖拽组件最右侧边框，调节其所占列数。
  
  图10 流式布局中调整组件宽度示例
  
  当原上下排布的多个组件所占列数之和小于12时，会自动调整到同一行。如下图所示，三个组件的所占列数分别调整为4，则本例中三个组件将会按照从左到右的顺序依次排布。
3. 通过拖拽的方式，调整组件上下、左右的排布次序。
  图11 调整组件上下、左右的排布次序示例
4. 流式布局类型高级页面，在高级页面工具栏中新增悬浮模式，开启此模式后拖入的组件不再按照从上到下、从左到右的顺序依次排列，可以设置其相对位置。
  图12 悬浮模式示例
  
  上图中标注说明如下：
  - 标注1：在高级页面工具栏中开启悬浮模式。
  - 标注2：拖入新组件。
  - 标注3：悬浮模式下，组件相对位置设置选项。
    - 相对定位
      - Screen：该组件基于当前视图的相对位置。
      - Layout：该组件基于当前布局的相对位置。
      - Widget：该组件基于其他组件的相对位置。
    - 组件位置：设置相对定位的具体方位，共9个设置项。
    - 显示顺序：当组件出现堆叠时，可以设置组件的显示顺序，设置值越大，显示越靠前。
    - 最大高度：设置该组件的最大高度，单位为px或%。
    - 宽度：设置该组件的宽度，单位为px或%。