组件

您可在移动可视化编辑页面添加各种组件，配置组件数据源、样式或交互动作，完成应用的多样化设计和功能需求开发。

添加组件

  1. 在移动应用编辑器中，单击最左侧的组件图标组件。

  2. 在画布左侧组件列表上方，输入组件名称，找到该组件，然后将组件拖拽到中间画布。

    您也可直接在基础组件列表中，找到目标组件，进行添加。

    说明

    您也可展开组件下拉列表，选择其他类型组件，展开组件列表，添加其他组件。

    文字

配置组件

在移动应用编辑器中，选中并配置组件，相关功能项说明如下。

功能项

说明

数据源

与Web可视化开发组件数据源配置方法相同，主要包括设备、接口和静态数据。

样式

  • 通用样式：配置组件名称、宽高和布局位置等，详细内容参见下文的“通用样式”。

  • 个性化样式：配置组件本身展示效果。部分个性配置项支持配置数据源，详细内容参见下文的“配置项的数据源”。

    更多个性配置内容，请参见本产品文档移动可视化开发>组件目录下的各组件文档。

交互

与Web开发组件支持的交互动作相同。具体操作，请参见交互配置。

通用操作

在画布中，选中组件，单击鼠标右键，可执行如下操作：

  • 选择图层：从当前组件所属栏开始，以从上至下的图层顺序显示图层名称。

    例如：在某纵向分栏的某栏嵌套横向分栏，然后在横向分栏的某栏添加一个图片组件，则图层列表如下图所示。

    图层

  • 剪切：支持在同一应用下，跨页面粘贴剪切的组件。

  • 复制：支持在同一账号下，跨页面和跨应用粘贴复制的组件。

通用样式

下图橙色框中为组件通用样式的配置项。

通用样式

配置项

说明

组件名称

设置组件名称，名称需在应用内具有唯一性。

组件可见性

设置组件是否在页面上显示。若设置为不可见，可配合交互，设置组件功能的使用。

不透明度

设置组件显示的透明度。0%为完全透明，100%为完全不透明。

宽度

设置组件在页面中展示的宽度和高度。

说明

仅按钮和开关组件不支持此配置。

高度

上边距

设置当前组件与相邻组件或所属栏边界的距离。

说明

组件与所属栏上或下边界的实际距离=所属栏上或下内边距+该组件的上或下外边距。

下边距

左边距

右边距

配置项的数据源

组件样式的部分配置项支持设置动态数据源设备或接口，其中颜色仅支持配置接口。组件会根据配置项的数据源，实时更新组件的显示效果。

不同配置项支持的数据格式不同，数据源返回数据需与要求的数据格式保持一致。

配置项

数据格式

文字级别

字符串。对应的映射关系如下：

  • font-size-display-3：运营标题-大

  • font-size-display-2：运营标题-中

  • font-size-display-1：运营标题-小

  • font-size-headline：标题-大

  • font-size-title：标题-中

  • font-size-subhead：标题-小

  • font-size-body-2：正文-强调

  • font-size-body-1：正文-常规

  • font-size-caption：水印文本

  • font-size-footnote：脚注

字号

单精度数字、双精度数字、整数。

行高

字重

数值。对应的映射关系如下：

  • 300：细体

  • 400：常规

  • 500：中黑

  • 600：中粗

  • 700：粗体

边框粗细

整数，取值范围为0~100。

边框样式

整数，取值范围为0~2。对应线样式的映射关系为（同下拉列表顺序）：

  • 0：实线

  • 1：虚线

  • 2：点线

颜色

RGB颜色的JSON格式。

{
  "r": 255,
  "g": 255,
  "b": 255,
  "a":0
}
说明

其中a表示颜色透明度，取值范围为0~1。

阿里云首页 物联网应用开发 相关技术圈