华为云首页用户手册

华为云Astro轻应用-高级页面布局:流式布局高级页面

华为云Astro轻应用-高级页面布局:流式布局高级页面

时间：2025-02-12 14:58:41

华为云Astro轻应用

流式布局高级页面

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

创建流式布局类型高级页面。
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或%。

上一篇：华为云Astro轻应用-运行态界面布局:操作步骤

下一篇：华为云Astro轻应用-运行态界面布局:操作步骤

开年采购季抽奖赢万元免单

立即前往

续费同价 L实例 2核2G 4M

98元/年

企业专享 X实例 2核4G 5M

198元/年

热门域名 1元随心购

1元/年起

华为云Astro轻应用-高级页面布局:流式布局高级页面

意见反馈

0/200

提交成功！非常感谢您的反馈，我们会继续努力做到更好反馈提交失败！请稍后重试！

推荐文章

解决方案
相关专题