将对的工作界面进行介绍，使您对工具界面的窗格模块获取初步认识

接口分区

现在，我们将介绍“iVX”的工作界面，让您对工具界面的窗格模块有一个初步的了解。iVX的工作界面由以下模块组成：

1. 阶段

屏幕中间有一个白色区域，称为“舞台”（也称为前景，编辑器窗口）。舞台可以比作Photoshop等主流图像处理软件中的“画布”，它定义了项目的编辑区域，所有的编辑和创作都完全可视化：

2. 组件工具栏

在工作界面最左侧的长条形组件栏中有一列垂直排列的小图标，每个小图标就是一个“组件”。每个组件都有特定的功能和用途，例如横幅、用于页面布局的面板、图像、视频、音频、用于添加媒体对象的文本、用于添加动画的动画组等：

组件是 iVX 中最核心的元素。所有的交互、动画、数据都需要基于组件，通过组件的组合和排列来完成。有些组件可以容纳媒体素材，比如图片组件，需要用图片素材指定；音频组件，带有指定的音频材料。

了解每个组件的详细用法和它支持的材质类型是使用 iVX 的基础，可以在“组件详细信息”模块中学习。

组件栏具有以下特点：

· 组件栏按组件功能分为几个区域，包括系统组件、媒体组件、数据组件、通讯组件等。

· 组件栏有“紧凑”和“完整”两种模式。您可以通过单击左上角的“折叠\展开”按钮在压缩和完整模式之间切换。

· 如果您的电脑屏幕无法显示完整工具栏中的所有工具，您可以将鼠标放在工具栏区域并使用鼠标滚轮上下滚动查看完整的工具栏区域。

· 根据选择的案例类型（小程序、网站）、开发环境和布局，系统会自动加载匹配的组件，组件类型和使用可能会略有不同。

· 前景和背景对应不同的组件。详细请参考“详细组件-前端组件/后端组件”。

我们可以将鼠标悬停在任何组件上，查看其对应的文档：

3. 对象树/材质面板

工作区的右侧是对象树/材料窗格。两者可以通过顶部选项卡进行切换完美官网搜索栏代码，默认状态显示对象树窗格。

· 对象树

对象树是对象管理的一个重要窗口。当前开发环境中添加的每个组件都会被对象树记录下来，并以树状结构直观展示，如下图：

对象树分为两部分：前景和背景。前台内容就是我们案例中显示的内容。打开机箱后可以看到的内容属于前台。通过操作对象树的前景部分，可以快速选择对象。、调整对象的层级关系、复制或删除对象、重命名对象、搜索对象、为对象添加动画或交互等，功能极其强大；后台主要功能是数据存储，后台可以添加数据库和服务。，可以通过服务前台在后台操作数据库。

· 材质面板

Clips 窗格用于管理当前案例中的所有媒体剪辑，包括视频、音频、图片等。所有资产都将显示在此窗格中，可以替换、下载、删除等。

4. 属性面板

当我们通过对象树或舞台任意点击一个对象时，可以看到该对象的属性窗格会显示在工具栏的右侧：

每个对象都有很多属性，比如 X 和 Y 是它的位置属性，宽度和高度是它的大小属性。通过调整这些属性，可以定义每个对象的外观、位置和功能，以满足我们的开发需求。

某些属性窗格可能包含可折叠样式部分以调整对象的视觉外观。

5. 菜单栏

菜单栏可用于执行一些全局操作。它是 iVX 中一个非常重要的功能区域。

菜单栏分为三个区域：

还有一些功能按钮，分别对应当前账号建立的数据库、电商、用户、连接、SVG库。

例如，通过设备列表功能，可以从系统预设的设备列表中选择合适的开发环境：

​​​

需要注意的是，有一个显示比例按钮，用于调整编辑器窗口的显示比例。当编辑器窗口很大时，很难完全显示出来。通过调整比例，方便我们更好的预览。

6. 逻辑工具栏

逻辑工具栏位于对象树窗格的右侧，用于向对象添加事件、自定义函数、操作组和服务等交互逻辑功能。

7. 辅助

当我们在使用中遇到任何问题时，我们可以通过查看文档、教学视频或直接询问客服的方式进行解答。

可以通过右下角的帮助按钮访问客户服务系统。

编辑器窗口

阶段

编辑器中间的白色区域是舞台（也称为前台和编辑器窗口），是整个项目在编辑过程中的显示界面。但是舞台并不是纯粹的展示窗口完美官网搜索栏代码，舞台也可以与应用交互，让应用开发更加方便。

该阶段在应用程序开发中有两个主要用途：

1.选中的对象

舞台上的内容是我们添加的所有组件组成的树状结构的具体展示。我们可以在舞台上找到每个处于显示状态的组件，并通过点击选择该组件，选择也直接反馈到对象树和属性面板。——对象树中对应的组件会被选中，属性面板会切换到被点击组件的属性面板。

当对象树层次比较深的时候，我们很难直接在对象树上定位到一个具体的组件，但是通过上面的方法，我们可以快速的找到并定位到该组件。

2.调整元素位置

当舞台上的一个元素处于相对定位环境时，位置是相对固定的，只能通过外边距来调整位置；但在绝对定位环境下（如H5应用环境、画布等），即元素是通过X和Y坐标定位的。，我们可以直接在舞台上拖动这些元素来改变它们的位置。

对象树

对象树简介

对象树是 iVX 编辑器中的一个可视化系统，用于直观地呈现案例数据结构和管理对象。它的功能非常强大，尤其是在案例中添加大量对象，数据结构复杂时，借助对象树可以更好地管理对象。在 iVX 中，对象树分为两部分：前景和背景。前景是我们项目的可见部分。各个页面的组件和模块放在前台的“根”下；后台专门用于存储数据库。，已经用于前后端通讯服务等。这部分主要是抽象功能，没有可视化实体。

对象树中的对象之间一般存在以下两种特殊关系：

指对象之间的相对顺序——对象树上的排列顺序，在相对定位环境和绝对定位环境下层级关系会有很大的不同。

在相对定位环境中，层次关系会影响两个对象之间的位置关系。对象树中层次较低的对象按照对象所在容器的排列方式排在最前面（图中前台的法线从上到下排列，层次在底部的对象）将显示在顶部）。

在绝对定位环境下，组件的位置排列不会相互挤压，所以层次关系不会影响两个组件的位置关系。当 时，级别较高的对象会覆盖级别较低的对象，调整级别会影响两个重叠图像中的哪一个显示在上面。

作品添加多个页面时，预览作品时页面会从下往上加载。

指对象之间的相对归属关系。通俗地说，就是用一个对象来容纳其他对象。例如，我们可以直观地看到，在对象树中，前景组件相对于所有对象都具有缩进关系。点击前景前面的小三角会塌陷，其他物体也会塌陷。类似于其他对象的文件夹：

这种包含和从属关系变成了父子关系，所有的对象都可以看作是前台组件的子对象，前台组件就是它的父对象。

父对象的位置、可见性等属性会被子对象继承，可以用来统一管理和容纳一组对象，避免前景中对象的无组织分散，从而形成更加嵌套统一的管理体系。规范合理的数据结构。

并非所有对象都可以充当父对象，在 iVX 中通常只有容器类组件（前景、行、列、容器组...）可以充当父对象。选择对象时，新添加的组件将变成其子对象。

对象树操作

除了案例结构的可视化呈现外，对象树还可以用于重命名、删除、复制和粘贴对象。

(1）重命名

添加组件时，系统会自动按照“组件类别+添加顺序”的方式为对象命名，如图片1、text2等。如果要重命名，可以在对象树中双击它的名字，它会进入重命名模式，你可以通过键盘输入来重命名。键入后，单击任意位置结束编辑状态：

(2）对象层级调整

对象树规定下层对象在下层，所以当我们需要调整对象的层级顺序时，只要长按鼠标左键并拖动到目标对象的顶部，系统就会出现橙色条 提示目标位置，确认无误后松开鼠标左键：

(3）对象的归属地调整

如果我们想改变对象的所有权，将它从A父对象移动到B父对象，或者我们可以通过拖放来实现。此时需要按住鼠标左键拖动到目标父对象的位置。目标父对象将以橙色突出显示。松开鼠标完成拖动：

需要注意的是，该方法选择的对象必须是可以作为父对象的容器类对象，否则会提示“不能拖入”。

该方法可以实现对象的移入和移出。有必要注意这与更改级别操作之间的区别。

(4）对象的管理操作

对象树允许我们复制（剪切）、粘贴（相对粘贴）和删除对象。使用时，只需选择目标对象（支持多选操作，长按Ctrl点击可同时选择多个对象），然后右键选择对应的命令。

通过这个方法，我们还可以实现对象的属性调整：

如果项目很大，有时很难立即找到我们需要的组件。这时候可以使用对象树的搜索功能，输入对象的名称，选择该名称的可以快速定位的对象。

iVX 支持对象（或对象组）的跨案例复制，即将一个对象从一个项目复制到另一个项目，便于可重复开发。