可视化组件介绍
更新时间：2018-11-19 11:33:07
概述
本章介绍通过“可视化搭建”方式开发移动应用时，使用的“可视化组件”，这些组件当前仅支持开发“自定义页面”。
可视化组件，分为基本组件、容器组件、图表组件、仪表组件、用例。
基本组件，有：图片、文字、按钮
容器组件，有：横向、纵向
图表组件，有：实时曲线
仪表组件，有：仪表盘、开工、指示灯
用例，是：使用以上组件（基本、容器、图表、仪表等组件）预先组合好，供开发者直接使用、或参考的示例。
另外，每一个“自定义页面”会有两个基本组件：导航栏、画布。
导航栏，处于自定义页面的最外层、并在页面最顶端。
- 每个“自定义页面”一旦被创建，系统会自动为其自动添加一个导航栏
- 每个“自定义页面”有且只有一个导航栏（不能增加、也不能删除）
画布，处于自定义页面的最外层，所有新增的组件都会放入画布中。
- 每个“自定义页面”一旦被创建，系统会自动为其自动添加一个画布
- 每个“自定义页面”有且只有一个画布（不能增加、也不能删除）
名词解释
|
名词
|
解释
|
出现位置
|
|
数据源
|
提供动态数据，当前支持的数据源有
|
选中单个组件后，会显示在右侧栏中
|
|
组件属性
|
组件的可配置项
|
选中单个组件后，会显示在右侧栏中
|
可视化组件说明
所有组件的属性、数据、事件，都可以在右侧栏中进行编辑。
画布、容器（纵向容器、横向容器），作为其他组件的外层载体，可以将屏幕划分为若干区域、设定组件的显示区域。
默认添加的组件
- 自定义页面创建时，系统会自动在最外层添加一个导航栏、一个画布
导航栏
- 属性说明
- 页面标题，可通过以下属性进行设置
- 字体、字号、字体样式、文字颜色
- 导航栏背景，可通过以下属性进行设置
- 背景色、背景透明度
- 页面标题，可通过以下属性进行设置
画布
- 属性说明
- 内容对齐方式
- 垂直对齐方式，有：靠顶部对齐、靠地步对齐、居中对齐
- 水平对齐方式，有：靠左侧对齐、靠右侧对齐、居中对齐
- 画布背景，可设置项如下
- 背景颜色
- 背景图片
- 背景填充方式：用以设置背景图片的填充方式（各个方式的说明参见“图片”组件的属性说明）
- 内容对齐方式
基本组件
图片
- 属性说明
- 宽度、高度
- 填充方式：当图片的宽度、高度设定为具体的px数值时，该属性才会有效
- 拉伸
| 填充方式 | 说明 |
|---|---|
| scaleToFill | 拉伸图片，会使用图片填满“图片组件”所占的区域 |
* 等比缩放
|
填充方式
|
说明
|
|
aspectFit
|
等比缩放图片，
使图片刚好能够全部显示在“图片组件”所占的区域内
|
|
aspectFill
|
等比缩放图片，
使图片的宽（或高）刚好与“图片组件”的宽（或高）相等
|
* 裁剪：图片不再做任何缩放、拉伸，当图片的宽（或高）大于“图片组件”的宽（或高），会进行裁剪
| 填充方式 | 说明 |
|---|---|
| center | 需要裁剪时，从图片的中间开始裁剪 |
| top | 需要裁剪时，从图片的顶部开始裁剪 |
| bottom | 需要裁剪时，从图片的底部开始裁剪 |
| left | 需要裁剪时，从图片的左侧开始裁剪 |
| right | 需要裁剪时，从图片的右侧开始裁剪 |
| topLeft | 需要裁剪时，从图片的左上角开始裁剪 |
| topRight | 需要裁剪时，从图片的右上角开始裁剪 |
文字
- 数据说明
- 内容：显示静态文字时，可以设置该属性
- 数据源：显示动态内容时，可设置该属性，当前有两个数据源
- 数据源：使用数据表单中的某个字段
- 设备：使用设备的某个状态
按钮
- 数据说明
- 按钮文字：显示在按钮上的文字
- 点击事件
|
服务调用
|
|
|
跳转超链接
|
|
|
显示/隐藏组件
|
|
容器
横向容器、纵向容器
属性说明
- 分栏目数：横向、纵向的分栏数目
- 宽度、高度：容器本身的宽度、高度
“分栏”属性说明
- 选中单个分栏后，右侧中会显示“分栏”的属性
- 纵向容器的分栏属性有
- 高度
- 对齐方式：垂直对齐方式、水平对齐方式
- 背景：背景颜色、背景图片、背景填充方式
- 横向容器的分栏属性有
- 高度
- 权重：分栏占横向容器宽度的权重
- 对齐方式：垂直对齐方式、水平对齐方式
- 背景：背景颜色、背景图片、背景填充方式
- 纵向容器的分栏属性有
- 高度
- 对齐方式：垂直对齐方式、水平对齐方式
- 背景：背景颜色、背景图片、背景填充方式
图表
当前提供的图表组件有：实时曲线
将图表组件与数据源关联后，可呈现报表功能