四、WebApp 基础可视组件（IVX 快速开发教程）

四、基础可视组件

通过本节你将了解 iVX 开发中的核心—— iVX 组件的使用方法。iVX 的组件是开发应用时所必要的对象，通过这些对象你将快速的完成应用的开发。

在 iVX 应用开发中，所有交互、动画、数据都需要以组件为基础，通过组件之间的编排来完成。例如图片组件可以容纳图片素材，音频组件可以容纳音频素材。

文章目录

• 四、基础可视组件
  • 4.1 页面添加
  • 4.2 行添加
  • 4.3 列添加
  • 4.4 文本添加
  • 4.5 按钮添加
  • 4.6 图片添加
  • 4.7 输入框添加

4.1 页面添加

在 WebApp 中，页面作为所有可视组件的容器，即需要创建一个页面包含其它可视容器。在一个 WebApp 中可以添加多个页面，这些不同页面之间可以相互跳转。

页面可以被添加在前台、容器（对象组）等父对象下，不能添加在行（列）、横幅、面板、层等对象下。添加一个组件时，需要点击一个 父容器 ，再点击 组件栏 中的 组件 进行添加，新添加的组件将会自动的对组件名进行排序：

添加 页面 后，页面 的大小由对应的 父容器 决定，在以上 gif 图演示中，前台 即为该 页面 的父容器。

4.2 行添加

行 是页面布局的重要元素，其内部元素是以 对定位的 方式进行排列，使用 行 可以实现元素内容横排展示。行 是一个容器，行 用来包裹其它组件对象，例如图片、文本、视频等。

在 绝对环境 和 相对环境 中，组件添加方式略有不同；绝对环境 中选择页面后点击 行 组件，鼠标光标将会切换成绘制模式，需要用鼠标绘制出该组件的大小；在 相对环境 中，选择 页面 为 父对象 后，直接点击 行 元素，该元素将会自动添加至该 父对象 中，此时该 行 的宽为 父对象 的最大宽度，也就是 100% 宽度，高度则会有一个默认值。

以下示例为 绝对定位 Web应用 中添加 行 的方式：

以下示例为 相对定位 Web应用 中添加 行 的方式：

4.3 列添加

列 是页面布局的重要元素，其内部元素是以 相对定位 的方式进行排列，使用 列 可以实现元素内容纵向展示，同 行 一样用来包裹其它组件对象，例如图片、文本、视频等。

以下示例为绝对定位 Web应用 中添加 列 的方式：

以下示例为 相对定位 Web应用 中添加 列 的方式：

4.4 文本添加

文本组件 用于插入文本对象，以记录并显示一段文本。文本组件 可以包含在 行 与 列 容器中，通过 行 和 列 的位置控制使文本跟随 行 和 列 进行展示。

以下示例为 绝对定位 Web应用 中添加 文本组件 的方式：

以下示例为 相对定位 Web应用 中添加 文本组件 的方式：

4.5 按钮添加

按钮组件 一般用于用户交互，例如用户输入信息后进行登录、某些信息的提交等。

以下示例为 绝对定位 Web应用 中添加 按钮组件 的方式：

以下示例为 相对定位 Web应用 中添加 按钮组件 的方式：

4.6 图片添加

图片组件 用于图片的显示，支持 jpg 、jpeg 、png 、gif 格式的图片素材。图片组件 可使用本地图片或网络图片。

以下示例为绝对定位 Web应用 中添加 图片组件 的方式：

以下示例为 相对定位 Web应用 中添加 图片组件 的方式：

4.7 输入框添加

输入框组件 用于用户与应用进行信息交互的文本输入容器，例如账户登录页面所需要用户输入的的账户文本与密码文本。

以下示例为 绝对定位 Web应用 中添加 输入框组件 的方式：

以下示例为相对定位 Web应用 中添加 输入框组件 的方式：