iVX 开发 - 入门UI 组件介绍及实操详解

Posted 2023-01-23 敬 之

本文导读

• • 写在前面
  • iVX 各 UI 组件及属性面板详解
  • • 1. 图片组件
    • 2. 图片序列组件
    • 3. 文本组件
    • 4. 输入框组件
    • 5. 富文本/富文本编辑器组件
    • 6. 地图组件
    • 7. 二维码组件

---

写在前面

学习电梯一键直达：人人都可快速掌握的可视化编程语言。

往期系列文章：

1. 认识 iVX
2. 为什么要做 iVX（iVX 企业文化）
3. iVX 开发 - 入门【一】开发环境、应用对象树介绍

---

iVX 各 UI 组件及属性面板详解

UI 组件位于 iVX 编辑器的左侧的组件栏中；

当我们将鼠标悬停至某一个组件时，会出现提示框，展示该组件的属性、动作以及事件；

如果想要详细了解该组件的使用方法，点击提示框右上角的 “查看详情” 即可直接跳转至该组件对应的文档中心。

1. 图片组件

图片组件用于在当前页面中插入图片，可支持 jpg 、jpeg 、png 、gif 格式。鼠标点击图片组件后会弹出图片选择框，然后选择图片进行上传；

上传后默认显示为该图片的原始宽高。点击图片选中，可以在左侧属性栏设置它的宽高等各项属以及排版、旋转、边框圆角、阴影、滤镜等效果。

此外还有自定义样式，即可以自己编写的 CSS 样式。选中图片，点击自定义样式后面的 “＋”为图片添加自定义样式。如下操作，初始图片边框为黑色，然后添加自定义样式<当鼠标悬停时，边框颜色变为红色>；

效果如下：

想要替换图片，双击此图片即可弹出图片选择框；也可以通过属性“素材资源地址”，直接上传在线图片，如下我们在复制百度的一张图片地址，粘贴至素材资源地址，即可切换。

2. 图片序列组件

图片序列组件用于展示一组有序排列的图片，依序播放。任意时间内仅展示一张图片，经过若干时间间隔后移除该图片，展示下一张或上一张图片。如果图片前后相接则将形成近似于动画、视频的效果。

点击图片序列组件，可以看到提示我们上传多图或者是 Gif 动图；

我们上传一张 GIF 动态图，选中图片后点击图片列表，就可以看到 GIF 动图的所有切割图。接下来可以调整某一切割图的时长进而控制整个动图播放。

3. 文本组件

文本组件用于插入文本对象，以记录并显示一段文本，这个用的也应该是最多的。除一些基本样式属性之外，还包括各类排版功能。

还有一个组件叫做中文字体组件，它与文本组件的区别在于提供了多种字体供我们选择。要知道在浏览器中是无法指定特殊中文字体的，而中文字体组件的作用就是在后台实时将输入的文本转换为图片，以实现特殊文字的展示。所以说中文字体 本质上是图片，并不是文本。

4. 输入框组件

输入框组件可通过键盘输入或粘贴的方式自主输入内容，与用户进行数据交互和数据收集。输入框同文本对象类似，允许自主定义输入框外观和文字样式并进行排版，也可定义提示文字。

不得不提的是输入框组件的限制输入类型功能，比如设置为数字，那么在预览时就会强行弹出手机的数字键盘且无法输入文字；设置为密码时则会自动用“*”隐藏。这都是内置已经做了限制的功能，直接使用即可。

此外还可以为输入框添加图标，可使用预设，也可在线搜索自己想要的图标。

5. 富文本/富文本编辑器组件

富文本组件是一款功能强大的文本工具，它比纯文本对象支持更丰富的文本格式。在编辑状态下，可以通过文本编辑区域进行文本编辑，并通过上方属性控制条修改字体样式、对齐方式等，实现快速的文本编辑。如下图；

如果说富文本是让开发者在开发时进行文本的编辑，与网页的用户并不会发生交互。那么富文本编辑器则可内嵌于浏览器，在案例非编辑状态(即已上线状态)下开放富文本编辑界面，容许用户进行富文本的排版和编辑。比如在社区博主帖子下的评论区内置一个富文本编辑器，则可容许用户对自己的评论内容进行样式、格式排版等编辑。

开发者视角

用户视角

6. 地图组件

地图组件有高德、和腾讯两个地图 API，会在案例中插入一个地图控件，具有腾讯/高德地图的基本功能。不仅可以对地图控件进行各项样式编辑，还可以确定中心点、中心位置、缩放、类型等属性。

7. 二维码组件

二维码组件用于在案例中动态生成二维码，除样式的编辑外，我们可以在“二维码数据”数据中指定二维码目标地址，也可以选择图片嵌入二维码。如下图：

篇幅原因，本文只对部分组件做介绍，好用的组件还有很多，如网页、图标、计数器、视频、直播窗等，其余各组件用法基本一致，操作也相同，这里不再赘述。