# 高级页面布局
#### 使用说明
在低代码平台中，可以通过如下两种模式，开发高级页面。
- 绝对布局：在绝对布局中，每个组件可在页面中任意位置进行拖拽放置，组件的宽高可自定义设置。绝对布局常用于大屏页面的开发。
- 流式布局：在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。流式布局常用于常规Web应用开发，例如电商网站、管理网站等。
 
#### 绝对布局高级页面
1. 创建绝对布局类型的高级页面。 
   1. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，登录经典版应用设计器。
   
   2. 在模块树中，将鼠标放在某个文件夹上，单击加号，选择"高级页面"。
   
   3. 设置高级页面标签和名称，布局类型选择"绝对布局"，单击"添加"。
      图1新建绝对布局类型高级页面   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127129.png "点击放大") 
   
   
   
   
2. 开发绝对布局类型的高级页面。 
   以开发如下所示高级页面为例，向您介绍绝对布局类型高级页面中组件的布局方法。
   图2绝对布局类型高级页面组件布局示例   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286941.png "点击放大")
   如上图所示，示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。
   1. 在高级页面右上方，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888420.png)，设置背景图片。
      图3设置页面背景色示例   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888424.png "点击放大") 
   
   2. 查找并拖入该页面中包含的组件，通过拖拽进行初步位置、大小调整。
      图4拖拽所需的组件到画布中   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286913.png "点击放大") 
   
   3. 设置文本编辑组件内容为"绝对布局类型高级页面"，字号为"大号"。
      图5设置文本编辑组件内容   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127125.png "点击放大") 
   
   4. 通过组件属性，精确设置组件大小。 本例中，设置组件宽度为600px、高度为350px。
      图6精确设置组件大小   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286945.png "点击放大") 
   
   5. 复制组件。 将上图左侧组件逐个复制，并将其拖拽到右侧，通过对齐提示线将其与左侧组件对齐。
      图7复制组件   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888400.png "点击放大") 
   
   6. 单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888396.png)，保存页面。
   
   7. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286937.png)，预览高级页面，查看当前页面在运行态的效果。
      图8预览高级页面   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047808.png "点击放大") 
   
   
   
   
 
 #### 流式布局高级页面
在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。
1. 创建流式布局类型高级页面。 
   1. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，登录经典版应用设计器。
   
   2. 在模块树中，将鼠标放在某个文件夹上，单击加号，选择"高级页面"。
   
   3. 设置高级页面标签和名称，布局类型选择"流式布局"，单击"添加"。
      图9新建流式布局类型高级页面示例   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047800.png "点击放大") 
   
   
   
   
2. 绝对布局类型高级页面与流式布局类型高级页面不同之处。 
   1. 在流式布局类型高级页面中，不可拖拽组件位置和大小，同样在"组件属性设置"栏中，也没有位置相关的设置选项。因为流式布局下组件将按照从上到下、从左到右的顺序依次排列。
   
   2. 流式布局类型高级页面的画布划分为12列，新拖入的组件默认宽度为100%，即占据12列。 也可以通过拖拽组件最右侧边框，调节其所占列数。
      图10流式布局中调整组件宽度示例   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047812.png "点击放大")
      当原上下排布的多个组件所占列数之和小于12时，会自动调整到同一行。如下图所示，三个组件的所占列数分别调整为4，则本例中三个组件将会按照从左到右的顺序依次排布。
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286925.png "点击放大")
      
   
   3. 通过拖拽的方式，调整组件上下、左右的排布次序。
      图11调整组件上下、左右的排布次序示例   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286917.gif "点击放大") 
   
   4. 流式布局类型高级页面，在**高级页面工具栏** 中新增**悬浮模式** ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127133.png)，开启此模式后拖入的组件不再按照从上到下、从左到右的顺序依次排列，可以设置其相对位置。
      图12悬浮模式示例   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286909.png "点击放大")
      上图中标注说明如下：
      - 标注1：在高级页面**工具栏** 中开启**悬浮模式**。
      
      - 标注2：拖入新组件。
      
      - 标注3：悬浮模式下，组件相对位置设置选项。
        - 相对定位
          - Screen：该组件基于当前视图的相对位置。
          
          - Layout：该组件基于当前布局的相对位置。
          
          - Widget：该组件基于其他组件的相对位置。
           
        
        - 组件位置：设置相对定位的具体方位，共9个设置项。
        
        - 显示顺序：当组件出现堆叠时，可以设置组件的显示顺序，设置值越大，显示越靠前。
        
        - 最大高度：设置该组件的最大高度，单位为px或%。
        
        - 宽度：设置该组件的宽度，单位为px或%。