华为云首页用户手册

Astro轻应用 AstroZero-高级页面布局:流式布局高级页面

时间：2023-11-01 16:25:39

Astro轻应用 AstroZero

流式布局高级页面

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

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