华为云首页用户手册

ASTRO轻应用 ASTROZERO-创建AstroZero高级页面:创建流式布局高级页面

ASTRO轻应用 ASTROZERO-创建AstroZero高级页面:创建流式布局高级页面

时间：2024-08-02 15:18:41

ASTRO轻应用 ASTROZERO

创建流式布局高级页面

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

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

上一篇：ASTRO轻应用 ASTROZERO-等待图元:如何使用等待图元

下一篇：ASTRO轻应用 ASTROZERO-创建AstroZero高级页面:创建绝对布局高级页面

新客秒杀 2核2G 3M L实例

68元/年

普惠上云领千元上云礼券

立即前往

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

888元/年

热门域名 1元随心购

1元/年起

ASTRO轻应用 ASTROZERO-创建AstroZero高级页面:创建流式布局高级页面

意见反馈

0/200

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

推荐文章

解决方案
相关专题