四、基礎可視組件

通過本節你將了解 iVX 開發中的核心—— iVX 組件的使用方法。iVX 的組件是開發應用時所必要的對象，通過這些對象你將快速的完成應用的開發。

在 iVX 應用開發中，所有交互、動畫、數據都需要以組件為基礎，通過組件之間的編排來完成。例如圖片組件可以容納圖片素材，音頻組件可以容納音頻素材。

---

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應用 中添加 輸入框組件 的方式：