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

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

创建绝对布局高级页面

在绝对布局中,每个组件可在页面中任意位置进行拖拽放置,组件的宽高可自定义设置。绝对布局常用于大屏页面的开发。

  1. 创建绝对布局类型的高级页面。

    1. 参考登录AstroZero新版应用设计器中操作,登录新版应用设计器。
    2. 在左侧导航栏中,选择“界面”。
    3. (可选)单击高级页面后的,为高级页面添加目录。

      高级页面默认存放在根目录下,在创建高级页面前,您可以先创建高级页面存放的目录,也可以在高级页面创建后将其拖拽到指定目录。

    4. 将鼠标放在已创建的高级页面目录上,单击,进入添加高级页面。

      如果未创建高级页面目录,请直接单击高级页面后的,进入添加高级页面。

    5. 设置高级页面标签和名称,布局类型选择“绝对布局”,单击“添加”。
      图1 新建绝对布局类型高级页面

      表1 高级页面参数说明

      参数

      说明

      标签

      输入高级页面的标签名,用于在页面显示,创建后可修改。

      取值范围:1~100个字符。

      名称

      输入高级页面的名称,名称是高级页面在系统中的唯一标识,创建后不可修改。命名要求如下:

      • 长度范围为1~100个字符。
      • 必须以英文字母开头,只能由英文字母、数字或单下划线组成,且不能以下划线结尾。

      视图

      为了让同一页面能够更好的呈现于电脑端和移动端,低代码平台提供了高级页面的电脑端和移动端两种终端视图,用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL,当电脑端或移动端加载这一URL时,平台会自动检测用户所用的设备类型并加载相应视图页面。

      默认为电脑端和手机端全部选中。

      说明:

      在应用中,首次创建高级页面时,才会显示“视图”参数。如果应用中已存在高级页面,则不会显示该参数。

      描述

      根据实际需求,在输入框中输入高级页面的描述信息。

      取值范围:1~255个字符。

      关键字

      为了便于搜索高级页面,可以在此处自定义一些关键字。

      布局类型

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

      默认值:绝对布局。

  2. 开发绝对布局类型的高级页面。

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

    图2 绝对布局类型高级页面组件布局示例

    如上图所示,示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。

    1. 在高级页面右上方,单击,设置背景图片。
      图3 设置页面背景色示例
    2. 查找并拖入该页面中包含的组件,通过拖拽进行位置、大小调整。
      图4 拖拽所需的组件到画布中
    3. 设置文本编辑组件内容为“绝对布局类型高级页面”,字号为“大号”
      图5 设置文本编辑组件内容
    4. 通过组件属性,精确设置组件大小。

      本例中,设置组件宽度为600px、高度为350px。

      图6 精确设置组件大小
    5. 复制组件。

      将上图左侧组件逐个复制,并将其拖拽到右侧,通过对齐提示线将其与左侧组件对齐。

      图7 复制组件
    6. 单击页面上方的,保存页面。
    7. 单击,预览高级页面,查看当前页面在运行态的效果。
      图8 预览高级页面

support.huaweicloud.com/usermanual-astrozero/astrozero_05_9093.html