四、基础可视组件

通过本节你将了解 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应用中添加输入框组件的方式：

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

五、Web App 基础可视组件属性（IVX 快速开发教程）
五.基础可视组件属性在 iVX 中各个组件存在不同的属性,这些属性用于设置显示的样式或者是自身具备的特征等,通过更改这些属性可以极大的方便我们进行项目的创作. 大多数组件都拥有相同的属性,相同属性在 ...
六、WebApp 二手信息站点页面制作（IVX 快速开发教程）
六.二手信息站点页面制作在了解了基础可视组件后,我们可以通过这些可视组件进行站点页面开发,在此以一个二手交易网站站点页面为例,本教程示例并不是成熟完善的示例,需要各位读者进行少量完善,示例只是用于功 ...
七、功能性组件与事件逻辑（IVX 快速开发教程）
七.功能性组件与事件逻辑由于 iVX 极度易用的特性,在 iVX 中开发微信小程序.WebApp.小游戏应用的开发流程大致相同.介绍完基础可视化组件后通过后台的服务.数据库与事件结合即可完成一个应用 ...
一、iVX简介（IVX 快速开发教程）
一.iVX简介通过本节你将对 iVX 有一个大致的认识,并且了解 iVX 能够做些什么,有哪一些优势,这将帮助你更好的上手 iVX 进行应用的开发,初步了解 iVX 的强大之处. 文章目录一.iV ...
十、小程序实战（IVX 快速开发教程）
十.小程序实战使用小程序完成一个二手信息站点与 WebApp 实现流程类型,只是部分内容使用了微信小程序特有的组件,例如微信登录与 WebApp 略有差别,其它逻辑实现较为类似.我们先制作页面,之后 ...
八、后台与数据库（IVX 快速开发教程）
八.后台与数据库在 iVX 中数据库作为数据存储仓库,通过数据库可以永久性存储存储数据,而后台服务起到数据传输作用,将数据库的数据传输到前台页面之中,页面再使用这些数据. 文章目录 ...
十一、飞机大战（IVX 快速开发教程）
十一.飞机大战制作微信小游戏大致流程与微信小程序.Web类似,不同的在于是组件的使用. 文章目录十一.飞机大战 11.1.1 完成游戏角色制作 11.1.2 完成物理世界添加 11.1.3 完成子 ...
九、二手信息站点后台完成（IVX 快速开发教程）
九.二手信息站点后台完成了解完后台实现后,我们开始为该二手商品站点完成完成后台制作. 文章目录九.二手信息站点后台完成 9.1.1 完成二手信息站点注册功能 9.1.2 完成二手信息站点登录功能 ...
Stark 组件：快速开发神器 —— 锦上添花
Stark 组件:快速开发神器 -- 锦上添花一.分页二.排序三.搜索 1.关键字搜索 2.组合搜索四.批量操作经过前面几个篇章,我们的 Stark 组件已经能够批量生成 URL,快速实现增 ...

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