三、集成開發環境界面介紹

通過本節你將了解 iVX 在線集成開發環境 界面，快速建立對 在線集成開發環境 的認識。

文章目錄

• 三、集成開發環境界面介紹
• • • 3.1 界面區域
    • 3.2 舞臺
    • 3.3 組件工具欄
    • 3.4 對象樹/素材面板
    • 3.5 屬性面板
    • 3.6 菜單面板
    • 3.7 邏輯工具面板
    • 3.8 輔助工具

---

3.1 界面區域

在線集成開發環境 界面分為以下幾個區域：

• 舞臺
• 組件工具欄
• 對象樹/素材面板
• 素材面板
• 屬性面板
• 菜單欄
• 邏輯工具欄
• 輔助工具

以下將創建一個默認設置的 WebApp 對 在線集成開發環境 界面的主要區域進行介紹。

3.2 舞臺

創建一個默認設置的 WebApp 應用后，在出現的窗口中間的白色區域即為舞臺：

在 舞臺 中可以編輯當前應用的 UI 界面，該舞臺與 Photoshop 等主流圖像處理軟件中的 “畫布” 類似，它定義了項目的編輯區域，所有對界面的編輯和創作都在這一區域通過可視化的方式進行編輯。

3.3 組件工具欄

在 在線集成開發環境 界面中，最左側區域為 組件欄 ：

在 組件欄 中的小圖標則是組件，這些組件都有特定的功能和用法；例如需要在 舞臺區 中添加圖片，需要在組件欄中找到圖片組件，點擊后即可添加至 舞臺區 中。

了解 iVX 組件的功能及使用方法是 iVX 進行開發的基礎。iVX 組件豐富，包括基礎網頁應用、小程序應用、小游戲應用的基礎元素組件以及一些的動效組等。iVX 組件并不只限于 UI 元素，還包括后臺組件，可編輯的邏輯、服務、數據庫等，具體的使用方式在該教程中將會詳細講解。

iVX 組件在不同類型應用下略有不同，但基礎組件相同。若出現不會使用的組件，想要了解其功能，我們可以通過鼠標懸浮任意一個組件幾秒，點擊其出現的 “查看詳情” 即可查看該組件的使用文檔。

3.4 對象樹/素材面板

對象樹 是當前項目中包括前后臺所有對象的管理窗口，以樹狀結構對組件進行可視化的展示，位于 在線集成開發環境 界面的最右側：

通過對 對象樹 對象進行操作，可以實現對選中對象的屬性更改；例如調整對象之間的層級關系、復制、刪除對象、對象重命名、搜索對象、為對象添加動畫、添加數據庫、添加服務等操作。具體操作將在之后教程中詳細講解。

3.5 屬性面板

當我們通過 對象樹 或 舞臺 任意點選一個對象時，可以看到組件欄右側將對應顯示該對象的屬性面板：

一般情況下對象擁有多種屬性，比如表示位置信息的 X 與 Y 坐標、尺寸屬性寬度與高度等；在屬性欄中可以編輯這些屬性改變當前對象的外觀或者對應功能。

3.6 菜單面板

菜單面板位于 在線集成開發環境 界面 的頂部，主要分為左、中、右三個區域：

菜單欄 左側主要功能為文件操作、文件保存、后端資源管理、前端資源管理：

菜單欄 中部主要功能為對項目的發布、預覽以及配置：

菜單欄 右側主要功能為項目的對其操作、等間距操作、舞臺（畫布）大小操作、輔助線可視設置以及舞臺縮放大小設置：

3.7 邏輯工具面板

邏輯工具面板 位于 對象樹 窗格右側，用于為對象添加事件、自定義函數、動作組、服務等交互邏輯功能：

3.8 輔助工具

當我們在使用中遇到任何問題時，都可以通過查看文檔、教學視頻或直接求助于客服來解答疑問：

客服系統可通過右下角的幫助按鈕進行訪問：

總結

以上是生活随笔為你收集整理的三、界面介绍（IVX快速手册）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。